Cambiare il colore di evidenziazione quando si seleziona il testo in un input di testo HTML

Question

Ho cercato per questo in tutto il web e non riesco nemmeno a trovare nessun altro chiedendo anche questo, per non parlare di una soluzione ...

C'è un modo per cambiare il colore dell'area evidenziata all'interno di un input di testo quando il testo è selezionato? Non il bordo di evidenziazione o lo sfondo, ma la porzione che appare intorno al testo quando hai effettivamente selezionato il testo.

Answer 1

Grazie per il link, ma sembra come se il testo vero e mettendo in evidenza solo non è esposto

Per quanto riguarda il problema attuale, ho finito per optare per un approccio diverso, eliminando la necessità di un input di testo del tutto e utilizzando innerHTML con JavaScript. Oltre a evidenziare il testo, non sembra solo molto più pulito.

Questo granulare di un tweak per un controllo di modulo HTML è solo un'altra buona argomentazione per eliminare del tutto i controlli di modulo. Haha!

Answer 2

Se siete alla ricerca di questo:

Ecco il link:

http://css-tricks.com/overriding-the-default-text-selection-color-with-css/

Answer 3

Credo che questo può aiutare:

stili di selezione

E 'possibile definire il colore e lo sfondo per il testo l'utente seleziona .

Provalo qui sotto. Se selezioni qualcosa e assomigli a questo, il tuo browser supporta gli stili di selezione.

Questo è il paragrafo con normal ::selection.

Questo è il paragrafo con ::-moz-selection.

Questo è il paragrafo con ::-webkit-selection.

Testsheet:

p.normal::selection { 
    background:#cc0000; 
    color:#fff; 
} 

p.moz::-moz-selection { 
    background:#cc0000; 
    color:#fff; 
} 

p.webkit::-webkit-selection { 
    background:#cc0000; 
    color:#fff; 
} 

Citato da Quirksmode

Answer 4

Mi rendo conto che questa è una vecchia questione, ma per tutti coloro che vengono attraverso di esso questo può essere fatto utilizzando contenteditable come mostrato in this JSFiddle.

Complimenti a Alex che ha menzionato questo nei commenti (non l'ho visto fino ad ora!)

Answer 5

@ Mike Eng,

Selezionando il colore di sfondo del testo, colore del testo può essere modificato con l'aiuto di :: selezione, notare che :: selezione opere in in cromo, per far sì che lavoro in browser basati su firefox prova questo :: - moz-selection

Provare il seguente frammento di codice in reset.css o nella pagina css dove esattamente si desidera applicare l'effetto.

::selection{ 
    //Works only for the chrome browsers 
    background-color: #CFCFCF; //This turns the background color to Gray 
    color: #000; // This turns the selected font color to Black 
} 

::-moz-selection{ 
    //Works for the firefox based browsers 
    background-color: #CFCFCF; //This turns the background color to Gray 
    color: #000; // This turns the selected font color to Black 
} 

Il codice sopra funzionerà anche nelle caselle di input.

Answer 6

questo è il codice.

/*** Works on common browsers ***/ 
::selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

/*** Mozilla based browsers ***/ 
::-moz-selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

/***For Other Browsers ***/ 
::-o-selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

::-ms-selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

/*** For Webkit ***/ 
::-webkit-selection { 
    background-color: #352e7e; 
    color: #fff; 
} 

Answer 7

Tutte le risposte qui sono corrette quando si tratta di l'elemento pseudo ::selection, e come funziona. Tuttavia, la domanda in effetti chiede in particolare come utilizzarla sugli ingressi di testo .

L'unico modo per farlo è quello di applicare la regola tramite un genitore di ingresso (qualsiasi genitore è per questo):

.parent ::-webkit-selection, [contenteditable]::-webkit-selection { 
 
\t background: #ffb7b7; 
 
} 
 

 
.parent ::-moz-selection, [contenteditable]::-moz-selection { 
 
\t background: #ffb7b7; 
 
} 
 

 
.parent ::selection, [contenteditable]::selection { 
 
\t background: #ffb7b7; 
 
} 
 

 
/* Aesthetics */ 
 
input, [contenteditable] { 
 
    border:1px solid black; 
 
    display:inline-block; 
 
    width: 150px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    padding: 3px; 
 
}

<span class="parent"><input type="text" value="Input" /></span> 
 
<span contenteditable>Content Editable</span>

Answer 8

Prova questo codice da usare:

/* For Mozile Firefox Browser */ 

::-moz-selection { background-color: #4CAF50; } 

/* For Other Browser*/ 
::selection { background-color: #4CAF50; } 

Answer 9

Ecco il problema:

 ::selection { 
     background: #ffb7b7; /* WebKit/Blink Browsers / 
    } 
    ::-moz-selection { 
     background: #ffb7b7; / Gecko Browsers */ 
    }

All'interno del selettore di selezione, il colore e lo sfondo sono le uniche proprietà che funzionano. Quello che puoi fare per un tocco in più, è cambiare il colore di selezione per diversi paragrafi o diverse sezioni della pagina.

Tutto quello che ho fatto è stato utilizzare diversi colori selezione per i paragrafi con classi diverse:

 p.red::selection { 
     background: #ffb7b7; 
    } 
    p.red::-moz-selection { 
     background: #ffb7b7; 
    } 
    p.blue::selection { 
     background: #a8d1ff; 
    } 
    p.blue::-moz-selection { 
     background: #a8d1ff; 
    } 
    p.yellow::selection { 
     background: #fff2a8; 
    } 
    p.yellow::-moz-selection { 
     background: #fff2a8; 
    }

Si noti come i selettori non sono combinati, anche se> il blocco di stile sta facendo la stessa cosa. Non funziona se si combinano:

<pre>/* Combining like this WILL NOT WORK */ 
p.yellow::selection, 
p.yellow::-moz-selection { 
    background: #fff2a8; 
}</pre> 

Questo perché i browser ignorano l'intero selettore se v'è una parte di esso che non capiscono o non è valido. Ci sono alcune eccezioni a questo (IE 7?) Ma non in relazione a questi selettori.

DEMO

LINK WHERE INFO IS FROM