Jak ustawić domyślny styl konektora wejściowego Chrome (na fokusie, pomarańczowy), aby wyglądał tak samo w każdej przeglądarce? Styl Chrome wydaje się być textarea:focus{outline: rgb(229, 151, 0) auto 5px; outline-offset: -2px}, jednak nie działa (nie ma auto dla outline-style dla innych przeglądarek).Skopiuj domyślny styl konektora domyślnego Chrome
Spróbuj tutaj:
Browsers' default CSS for HTML elements
Masz domyślny CSS Google Chrome tam. Jestem pewien, że styl zostanie tam zdefiniowany.
P.S .: Będziesz potrzebował Chrome/Safari (WebKit).
W moim pytaniu opublikowałem już styl Chrome i wskazałem, że nie działa on w innych przeglądarkach. – geehertush01
Może można zastąpić arkusze stylów innych przeglądarek za pomocą '! Important'? – Ivozor
Nic nie zmieni. Wygląda na to, że Chrome ma specjalne ustawienia, których nie można osiągnąć za pomocą css. Jak już powiedziałem, używa 'auto' jako' konspektu 'i nie ma znaczenia dla innych przeglądarek. – geehertush01
Po sprawdzeniu dowolnego znacznika wejściowego z otwartym panelem stylów w przeglądarce Chrome powinny zostać wyświetlone domyślne właściwości arkusza stylów użytkownika. Użyj selektora kolorów w Narzędziach programistów WWW lub wtyczki wyboru koloru chromu, aby uzyskać wartość rgb.
W moim pytaniu opublikowałem już styl Chrome i wskazałem, że nie działa on w innych przeglądarkach. – geehertush01
Następnie musisz sfałszować efekt, który chcesz osiągnąć, korzystając z innych opcji CSS lub odmiany [Textarea Tricks] (http://css-tricks.com/textarea-tricks/) – bitmapshades
Nie wiem, czy moje rozwiązanie jest wystarczająco dobre dla ciebie, ale do tej pory, nie wiem w inny sposób ... I zrobić to tak:
textarea:focus
{
outline:none; /*or outline-color:#FFFFFF; if the first doesn't work*/
border:1px solid #48A521;
-webkit-box-shadow: 0px 0px 4px 0px #48A521;
box-shadow: 0px 0px 4px 0px #48A521;
}
+1. To jest najbliższy "auto" w innych przeglądarkach. Fiddle trochę z kolorami granicy i przejrzystości cienia, i może wyglądać całkiem podobnie. – Zilk
Nie możesz, naprawdę.
Chrome używa "automatycznego" stylu konspektu (cokolwiek może oznaczać), a to nie jest zgodne ze specyfikacją CSS3.
Najlepszym rozwiązaniem jest stworzenie własnego stylu podświetlania i (i przynajmniej) nadpisanie stylu konspektu. W ten sposób wszystkie przeglądarki będą miały ten sam element fokusowania dla twojej strony.
Kopiowanie stylu chromowania jest bardzo trudne. Ponieważ domyślnie css nie obsługuje konturów podobnych do cienia, obsługiwane są tylko style stałe, przerywane itd. Będziesz musiał naśladować go za pomocą box-shadow, jednak z jakiegoś dziwnego powodu spowoduje to wyświetlenie granicy pola wprowadzania (w stylu wstawki), co zmusza do zdefiniowania obramowania pola wprowadzania.
Można zrobić coś takiego na przykład:
input:focus {
box-shadow: 0px 0px 8px blue;
outline-style: none;
}
input {
border: 1px solid #999;
}
outline-color: rgb(77, 144, 254); // #4D90FE
outline-offset: -2px;
outline-style: auto;
outline-width: 5px;
konwertować do tego
input:focus {
outline:none;
border:1px solid #4D90FE;
-webkit-box-shadow: 0px 0px 5px #4D90FE;
box-shadow: 0px 0px 5px #4D90FE;
}
W Chrome 60 kontur jest teraz niebieski.
Automatyczny styl obrysu tworzy kontur jednego piksela, z rogami "karbowany".
ten można osiągnąć stosując :: before i :: after zasad tak:
DIV.someclass--focus {
outline:none;
border: 1px solid #86A8DF !important;
}
DIV.someclass--focus::before {
position:absolute;
margin-top:-2px;
margin-bottom: -2px;
margin-left: -1px;
margin-right: -1px;
top:0px;
bottom:0px;
left:0px;
right:0px;
content: ' ';
border-left: none;
border-right: none;
border-top: 1px solid #A6C8FF;
border-bottom: 1px solid #A6C8FF;
}
DIV.someclass--focus::after {
position:absolute;
margin-top: -1px;
margin-bottom: -1px;
margin-left: -2px;
margin-right: -2px;
top:0px;
bottom:0px;
left:0px;
right:0px;
content: ' ';
border-left: 1px solid #A6C8FF;
border-right: 1px solid #A6C8FF;
border-top: none;
border-bottom: none;
}
Pierwsza zasada zmienia kolor obramowania.
Druga reguła zapewnia górną i dolną granicę, która rozpoczyna się o jeden piksel od lewej strony i kończy się o jeden piksel od prawej.
Reguła thirder zapewnia lewą i prawą granicę, która rozpoczyna się o jeden od góry i kończy o jeden piksel od dołu.
CAVEAT: element zawierający musi być jawnie "position: relative", aby absolutne pozycjonowanie :: before/:: after działało.
Nazwa klasy "someclass-focus" nie ma znaczenia ... musi być zastosowana/usunięta, gdy chcesz, aby kontur pseudoogniskowania pojawiał się/znikał.
Sprawdź moją odpowiedź. Mam nadzieję, że to pomaga. ;) –
Czy uważałeś, że użytkownicy innych przeglądarek oczekują, że ich przeglądarka działa tak, jak ich przeglądarka zwykle koncentruje się na nich, i że ich działanie nie musi być poprawione przez jedną, nagle działającą tak jak Chrome? –