2013-08-21 17 views
10

Sto provando a impostare il colore di selezione sul nostro sito [per i browser che supportano questo; non supportato otterrà il sistema predefinito; la ricerca di solo CSS & non implementerà JS per questo].CSS - imposta il colore di sfondo di :: selection in un INPUT o TEXTAREA in webkit/chrome?

La selezione :: funziona correttamente (lasciando fuori -moz per chiarezza qui) sul testo di una pagina normale. Tuttavia, voglio che la selezione :: funzioni anche sul testo selezionato all'interno degli elementi INPUT e TEXTAREA. Le seguenti opere in Firefox (http://cl.ly/image/201s09102K36) ma che non lavoro in WebKit (Chrome o Safari), dove ho la luce del sistema-default blu (http://cl.ly/image/031C2R1Q2l2i):

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

Qualsiasi aiuto? Ho cercato le sostituzioni di -webkit ma non sono riuscito a trovare la proprietà pertinente.

+1

Sembra che questo è un noto bug WebKit: https://bugs.webkit.org/show_bug.cgi?id=38943. Non sei sicuro se ci sono delle proprietà aggiornate o qualsiasi altra cosa che si è verificata intorno al bug dal suo report? – ElBel

+1

+1 Sembra che sia stato registrato come bug di Chrome circa quattro anni fa troppo https://code.google.com/p/chromium/issues/detail?id=62263 – cirrus

+0

È stato corretto all'inizio del 2014. https://code.google.com/p/chromium/issues/detail?id=62263 –

risposta

1

Ho provato questo sul mio Mac in Chrome 51.0.2704.103 e Safari 9.1.1 (11601.6.17) e sembra che questo non sia più un problema. Non è necessario per l'ingresso :: selezione come il PO ha suggerito, il codice necessario per questo è:

::selection{ 
    background: #f7a494; 
} 

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

Se si continua ad avere questo problema, provare le seguenti violino, se funziona ci può essere qualcosa d'altro in il tuo codice che sta interferendo con esso.

https://jsfiddle.net/nLftpwjc/


Proof

enter image description here

-1

BCZ, WebKit segue la RGBA anziché # 123456

prova le seguenti:

ingresso :: selezione {background: RGBA (231,105,105,0.7)}

+2

Non ha funzionato. Inoltre, il webkit supporta hex, rgb e rgba per tutte le altre proprietà che ho incontrato, quindi sarei sorpreso se questo fosse stato modificato specificamente per questo. – ElBel

-1

ho appena cercato in giro per questo e ho notato che è sufficiente utilizzare un selettore :focus per definire il campo di input focalizzato CSS. Quindi:

input:focus { background: #f7a494; } 

Spero che questo aiuti.

+2

Questo cambia solo il colore di sfondo dell'input, non il colore di sfondo della parte selezionata, che è ciò di cui OP ha bisogno. –

Problemi correlati