entfernen inneren Schatten der Texteingabe

Question

So habe ich eine Texteingabe, im HTML5, auf Chrom, und ich möchte das Aussehen einer Texteingabe ändern, habe ich die Gliederung auf Fokus (orange auf Chrom), ich setze den Hintergrund auf eine helle Farbe #f1f1f1, aber jetzt gibt es wie eine dickere Grenze auf der oberen und linken Seite, wie es aussehen soll geschoben, wenn es keine Änderung der Hintergrundfarbe ist dies nicht passieren. Wie entferne ich es? Leider kann ich kein Bild auf einem Mobilgerät bereitstellen.

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

Answer 1

border-style:solid; wird die inset Art überschreiben. Was hast du gefragt?

border:none wird die Grenze alle zusammen entfernen.

border-width:1px wird es einrichten, um eine Art wie vor dem Hintergrund zu ändern.

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

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

Answer 2

Fügen Sie border: none oder border: 0 hinzu, um den Rand überhaupt zu entfernen, oder border: 1px solid #ccc, um den Rand dünn und flach zu machen.

Um Geister padding in Firefox zu entfernen, Sie ::-moz-focus-inner verwenden können:

live demo

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

See.

Answer 3

Stellen Sie border: 1px solid black so ein, dass alle Seiten gleich sind, und entfernen Sie jede Art von benutzerdefiniertem Rahmen (nicht fest). Legen Sie auch box-shadow: none fest, um alle eingelegten Schatten zu entfernen.

Answer 4

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

-webkit-Aussehen: keine;

wie hier vorgeschlagen: Remove textarea inner shadow on Mobile Safari (iPhone)

Answer 5

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

box-shadow: inset 0px 0px 0px 0px red; 

Answer 6

Ich arbeite an Firefox. und ich hatte das gleiche Problem, Eingabeart Text sind automatisch definiert etwas sieht aus wie Boxshadow Einfügung, aber es ist nicht. die Sie ändern möchten ist Grenze ... nur Einstellung border:0; und Sie sind fertig.

Answer 7

diese
outline: none;

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