Entfernen Sie den inneren Schatten der Texteingabe

77

Ich habe also eine Texteingabe, ich verwende HTML5, auf Chrom, und ich möchte das Aussehen einer Texteingabe ändern. Ich habe den Umriss auf Fokus entfernt (Orange auf Chrom). Ich habe den Hintergrund auf eine helle Farbe gesetzt, #f1f1f1aber jetzt Es gibt wie einen dickeren Rand oben und links, als ob er hineingedrückt aussehen soll. Wenn sich die Hintergrundfarbe nicht ändert, passiert dies nicht. Wie entferne ich es? Leider kann ich auf einem mobilen Gerät kein Bild bereitstellen.

Es passiert auf Chrome, dh und Firefox kann keine anderen testen.

html css input FabianCook
quelle

Antworten:

135

border-style:solid;überschreibt den insetStil. Welches ist, was Sie gefragt haben.

border:none wird den Rand alle zusammen entfernen.

border-width:1px wird es so einrichten, dass es dem Hintergrundwechsel ähnelt.

border:1px solid #cccccc ist spezifischer und gilt für alle drei, Breite, Stil und Farbe.

Beispiel: https://jsbin.com/quleh/2/edit?html,output

Anthony Hatzopoulos
quelle
7
Die erste Zeile border-style: solidist die beste Antwort auf diese Frage.
Charleslparker
Border-Style: Keine war die Antwort, nach der gesucht wurde
Satbir Kira
27

Keine der Lösungen funktioniert derzeit. Hier ist meine Lösung. Sie können Präfixe hinzufügen.

box-shadow: inset 0px 0px 0px 0px red;
atilkan
quelle
18

Fügen Sie einen Rand hinzu border: noneoder border: 0entfernen Sie ihn oder border: 1px solid #cccmachen Sie den Rand dünn und flach.

Um Ghost Padding in Firefox zu entfernen, können Sie Folgendes verwenden ::-moz-focus-inner:

::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Siehe Live-Demo .

Marat Tanalin
quelle
Wenn ich das mache, hat es keinen Rand, ja, aber wenn ich den Rand auf 1px und die Farbe auf Schwarz setze, werden nur zwei Seiten gesetzt. Der andere ist weiß.
FabianCook
11

Stellen Sie so ein border: 1px solid black, dass alle Seiten gleich sind, und entfernen Sie alle benutzerdefinierten Rahmen (außer Volumenkörper). Stellen Sie außerdem ein, dass box-shadow: nonealle darauf angewendeten Schatten entfernt werden.

Erick Petrucelli
quelle
Wenn ich den Rand auf eine andere Farbe setze, sagen wir #eee, werden nur noch zwei Seiten gesetzt
FabianCook
Schau dir mein Update an. Möglicherweise müssen Sie auch den Rahmenstil und die Größe auf solidund ändern 1px.
Erick Petrucelli
Vielen Dank. Ich habe meine von dir gegründet, also ja.
FabianCook
1
Box-Shadow hat die Lösung für mich zum Laufen gebracht, keine andere Lösung hatte dieses Bit.
Nate M.
0

Ich arbeite an Firefox. und ich hatte das gleiche Problem, Eingabetyp Text wird automatisch definiert etwas sieht aus wie Boxshadow Inset, aber es ist nicht. Das, was Sie ändern möchten, ist Grenze ... nur einstellen border:0;und fertig.

Vincent Thorpe
quelle
0

Hier ist ein kleiner Ausschnitt, der zum Ausprobieren cool sein könnte:

input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}

Beachten Sie Folgendes: border-styleEntfernt den inneren Schatten.

input {
    border-radius: 10px;
    border-color: violet;
    border-style: solid;
  }
<input type="text"/>
Erweitern Sie das Snippet

bessa3301
quelle