usuń wewnętrzny cień wprowadzania tekstu

Question

Mam więc dane wejściowe, im używam html5, na chrome, i chcę zmienić wygląd wprowadzanego tekstu, usunąłem zarys fokusa (pomarańczowy na chromie), I ustawić tło na jasny kolor #f1f1f1, ale teraz jest jak grubsza ramka na górze i na lewych stronach, jak to ma wyglądać na wciśnięty, kiedy nie ma zmiany koloru tła, tak się nie stanie. Jak mogę go usunąć? Niestety nie mogę podać obrazu na urządzeniu mobilnym.

Zdarza się, że w chrome, ie, i Firefox, nie można przetestować żadnych innych.

Answer 1

border-style:solid; zastąpi styl inset. O to właśnie prosiłeś.

border:none spowoduje usunięcie granicy razem.

border-width:1px skonfiguruje go tak, aby był trochę jak przed zmianą tła.

border:1px solid #cccccc jest bardziej szczegółowy i dotyczy wszystkich trzech, szerokości, stylu i kolorów.

przykład: https://jsbin.com/quleh/2/edit?html,output

Answer 2

Dodaj border: none lub border: 0, aby usunąć obramowanie, lub border: 1px solid #ccc, aby obrzeże było cienkie i płaskie.

Aby usunąć ducha wyściółkę w Firefoksie, można użyć ::-moz-focus-inner:

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

Zobacz live demo.

Answer 3

Ustaw border: 1px solid black, aby wszystkie strony były równe i usuń wszelkie niestandardowe obramowania (inne niż bryły). Należy również ustawić box-shadow: none, aby usunąć nałożony cień cewki.

Answer 4

To rozwiązanie ruchomej polowania:

-webkit-wygląd: brak;

jak sugeruje tutaj: Remove textarea inner shadow on Mobile Safari (iPhone)

Answer 5

Żadne rozwiązania pracują obecnie. Oto moje rozwiązanie. Możesz dodać prefiksy.

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

Answer 6

Pracuję nad firefox. i miałem ten sam problem, tekst typu wejściowego jest automatycznie definiowany, coś wygląda jak wstawka w cieniu, ale tak nie jest. , którą chcesz zmienić, to granica ... po prostu ustawienie border:0; i gotowe.

Answer 7

Spróbuj
outline: none;

żywo demo https://codepen.io/wenpingguo/pen/KQgbXq