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

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

45

Dies ist die Lösung für mobile Safari:

-webkit-Aussehen: keine;

wie hier vorgeschlagen: Entfernen Sie den inneren Schatten des Textbereichs auf Mobile Safari (iPhone).

— Owen
quelle

Funktioniert als Zauber

— Shalin Nipuna

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.

5

Versuche dies
outline: none;

Live-Demo https://codepen.io/wenpingguo/pen/KQgbXq

— user1506075
quelle

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