2013-08-21 6 views
10

Próbuję ustawić kolor zaznaczenia na naszej stronie [dla przeglądarek, które obsługują to; nieobsługiwany spowoduje, że system będzie domyślny; szukanie tylko CSS & nie będzie implementować JS dla tego].CSS - ustawić kolor tła :: selection w WEJŚCIU lub TEKSTARZE w webkit/chrome?

Wybranie :: selection działa poprawnie (pozostawiając tutaj -moz dla przejrzystości tutaj) na zwykłym tekście strony. Jednak chcę, aby zaznaczenie :: działało również na wybranym tekście w elementach INPUT i TEXTAREA. Następujące prace w Firefoksie (http://cl.ly/image/201s09102K36), ale nie ma praca w Webkit (Chrome lub Safari), gdzie mogę dostać systemu-default jasnoniebieski (http://cl.ly/image/031C2R1Q2l2i):

::selection { background: #f7a494; } 
input::selection { background: #f7a494; } 

pomocy? Rozejrzałem się za zastąpieniem -webkit, ale nie mogłem znaleźć odpowiedniej właściwości.

+1

Wygląda na to, że jest to znany bug WebKit: https://bugs.webkit.org/show_bug.cgi?id=38943. Nie masz pewności, czy istnieją jakieś zaktualizowane właściwości lub coś, co pojawiło się od czasu zgłoszenia błędu? – ElBel

+1

+1 Wygląda na to, że został zarejestrowany jako błąd chrome około cztery lata temu też https://code.google.com/p/chromium/issues/detail?id=62263 – cirrus

+0

Naprawiono go na początku 2014 r. Https://code.google.com/p/chromium/issues/detail?id=62263 –

Odpowiedz

1

Testowałem to na moim Macu w Chrome 51.0.2704.103 i Safari 9.1.1 (11601.6.17) i wygląda na to, że to już nie jest problem. Nie ma potrzeby wprowadzania :: wybór jak PO zasugerował, kod potrzebny do tego jest:

::selection{ 
    background: #f7a494; 
} 

::-moz-selection{ 
    background: #f7a494; 
} 

Jeśli nadal masz ten problem spróbuj następujące skrzypce, czy działa tam może być coś innego Twój kod ingeruje w to.

https://jsfiddle.net/nLftpwjc/


Dowód

enter image description here

-1

bcz, WebKit następuje rgba zamiast # 123456

spróbuj wykonać następujące czynności:

wejściowej :: selekcji {background: rgba (231,105,105,0.7)}

+2

Nie działa. Również webkit obsługuje hex, rgb i rgba dla wszystkich innych właściwości, z którymi się zetknąłem, więc byłbym zaskoczony, gdyby to się zmieniło specjalnie dla tego. – ElBel

-1

właśnie szukaliśmy dookoła tego i zauważyłem, że możesz użyć selektora :focus, aby zdefiniować pole CSS pola skupienia. W ten sposób:

input:focus { background: #f7a494; } 

Mam nadzieję, że to pomoże.

+2

To tylko zmienia kolor tła wejścia, a nie kolor tła wybranej części, który jest tym, czego potrzebuje OP. –