Entfernen Sie alle Stile (Rand, Glühen) aus dem Textbereich

75

Ich möchte die Stile aus einem Textbereich entfernen und alles weiß lassen, wenn möglich ohne Rand oder Glühen. Ich habe es mit verschiedenen Sachen versucht, die hier auf SO gefunden wurden, aber nichts funktioniert (versucht mit FF und Chrome).

Also, ist es möglich und wenn ja, wie geht das?

Geben Sie hier die Bildbeschreibung ein

Was ich bisher versucht habe:

textarea#story {
  // other stuff
  -moz-appearance:none;
  outline:0px none transparent;
}

textarea:focus, input:focus{
    outline: 0;
}

*:focus {
    outline: 0;
}

— Heiliger Bart
quelle

Haben Sie einen CSS-Reset versucht?

— j08691

154

Der Glow-Effekt wird höchstwahrscheinlich durch Box-Shadow gesteuert. Zusätzlich zu den Aussagen von Pavel können Sie die Box-Shadow-Eigenschaft für die verschiedenen Browser-Engines hinzufügen.

textarea {
    border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    resize: none; /*remove the resize handle on the bottom right*/
}

Sie können auch versuchen,! Important hinzuzufügen, um dieses CSS zu priorisieren.

— IamShipon1988
quelle

22

Sie können auch den Größenänderungsgriff unten rechts mitresize: none;

— PhilT

28

Wenn Sie ALLES entfernen möchten:

textarea {
    border: none;
    background-color: transparent;
    resize: none;
    outline: none;
}

— Lucas B.
quelle

1

Nett. Fügen Sie einen "Randradius: 0;" Wenn Sie wieder Ränder hinzufügen, um die Kurven aus dem Textformular zu entfernen.

— stcorbett

Diese Antwort ist der akzeptierten Antwort überlegen, da sie "Größe ändern: keine" enthält, wobei die akzeptierte Antwort fehlt.

— Aaron

0

Versuche dies:

textarea {
        border-style: none;
        border-color: Transparent;
        overflow: auto;
        outline: none;
      }

jsbin: http://jsbin.com/orozon/2/

— Pavel
quelle

Versuchte es, aber nichts passiert: /

— Holyredbeard

hm, ich habe überhaupt kein styling ... hast du jsbin link ausprobiert?

— Pavel

Versuchte dein jsbin und das funktioniert, aber nicht für mich in meinem Code. Ich frage mich, ob es vielleicht etwas mit Twitter Bootstrap zu tun hat. Wenn ich nach jeder Zeile "! Wichtig" setze, wurde viel Styling entfernt, aber oben, links und rechts befindet sich immer noch ein kleiner, heller Rand (unten ist weiß). Seltsam ...

— heiliger Bart

@holyredbeard Haben Sie versucht, den obigen Stil auf den : Fokus- Selektor anzuwenden ?

— Matt Fricker

0

Wenn Sie kein Glück mit oben haben, versuchen Sie es mit einer Klasse oder identifizieren Sie sogar etwas wie textarea.foo und dann Ihren Stil. oder versuchen Sie es! wichtig

— Mahmoud
quelle