CSS - Usuwanie aktywnego podkreślenia pola wprowadzania

Question

Używanie tylko html i css, w jaki sposób wyłączyć niebieski (w Firefox) kolor podświetlenia wokół aktywnego pola wejściowego. Próbowałem już używać input {outline:none;}, ale bez powodzenia. Dzięki za pomoc! =)

ok, ignorując poprzedni kod o konspekcie, wybrałem niewłaściwą właściwość do zmiany. Próbuję tylko usunąć podświetlanie (niezależnie od przeglądarki, pogrubioną i kolorową ramkę) wokół aktywnego pola wprowadzania formularzy, bez zmiany ani wyłączenia stylizacji. Thanks =)

Answer 1

Zobacz tę fiddle.

Wygląda na to, że musisz ustawić właściwość border, aby działała outline: none. Jeśli skomentujesz w dyrektywie granicznej, kontur zniknie.

Answer 2

Aby usunąć spróbować podświetlający dodając tę ​​zasadę do pola (ów) wejściowego:

-moz-appearance:none; 

Można to również zrobić dla przeglądarek WebKit oparte stosując odpowiedni prefix:

-webkit-appearance:none; 

Powinno to zająć się dowolnymi granicami, konspektem itp. Przy użyciu tylko jednej właściwości CSS. W przypadku przeglądarek innych niż para WebKit i Firefox - Opera i IE - warto również dodać właściwości border i outline, zapewniając zgodność krzyżową przeglądarki.

Answer 3

input {border:0; outline:none;} 

powinien usunąć wszystkie krawędzie/kontury.

Answer 4

Odpowiedź jest prostsza niż ja reliased:

box-shadow:none; 

Answer 5

Musisz użyć: deklaracja ostrości. W tym przypadku:

input:focus {outline:none;} 

Wszystko wprowadzić użytkownika w projekcie nie będą miały niebieskie obramowanie.

Jeśli chcesz konkretnego atrybutu, użyj tego:

input[type=text]:focus {outline:none;} 

Nadzieję, że to pomaga.=)

Answer 6

ten powinien pracować dla większości typów wejść na Firefox:

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

Answer 7

najlepszym sposobem na osiągnięcie tego dla wszystkich przeglądarek w utrzymaniu tag wejściowy w innym znaczniku div, tak aby pokryć granica

HTML Kod

<div class='rel lef srch_blck'> 
    <input type='text' class='rel lef srch_pad' name='srch_inp'/> 
</div> 

do powyższej html pozwala dodać następujący kod CSS, aby usunąć granicy

.srch_blck{ overflow:hidden;width:298px;height:28px; } 
.srch_pad{ left:-1px;top:-1px;width:300px;height:31px; } 

Answer 8

Moje rozwiązanie jest, aby najpierw zabić przeglądarce domyślne na wejściach i nadać mu domyślną granicę takiego:

input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="url"], 
input[type="search"], 
textarea { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    border: 1px solid #ddd; 
} 

Potem zresetować dany box-shadow i przedstawić tak:

input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
input[type="tel"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
textarea:focus { 
    border: 1px solid #ccc; 
    box-shadow: none !important; 
    outline: none !important; 
} 

Pracowałem dla mnie we wszystkich nowoczesnych przeglądarkach przetestowanych do tej pory (IE, FF, Chrome, Operah & Safari).