Come modificare il colore del segnaposto sullo stato attivo?

Come modificare il colore del segnaposto quando si concentra il campo di immissione? Io uso questo css per impostare il colore predefinito, ma come modificarlo sulla messa a fuoco?Come modificare il colore del segnaposto sullo stato attivo?

::-webkit-input-placeholder { color: #999; } 

/* Firefox < 19 */ 
:-moz-placeholder { color: #999; } 

/* Firefox > 19 */ 
::-moz-placeholder { color: #999; } 

/* Internet Explorer 10 */ 
:-ms-input-placeholder { color: #999; }

fonte

2012-11-01 Davide Palmieri

Prova questa, questo dovrebbe funzionare:

input::-webkit-input-placeholder { 
    color: #999; 
} 
input:focus::-webkit-input-placeholder { 
    color: red; 
} 

/* Firefox < 19 */ 
input:-moz-placeholder { 
    color: #999; 
} 
input:focus:-moz-placeholder { 
    color: red; 
} 

/* Firefox > 19 */ 
input::-moz-placeholder { 
    color: #999; 
} 
input:focus::-moz-placeholder { 
    color: red; 
} 

/* Internet Explorer 10 */ 
input:-ms-input-placeholder { 
    color: #999; 
} 
input:focus:-ms-input-placeholder { 
    color: red; 
}

Ecco un esempio: http://jsfiddle.net/XDutj/27/

fonte

2012-11-01 18:47:12

perché non c'è: -ms-input-placeholder? –

Non ho IE per testare quanto sopra, sarebbe bello se qualcuno potesse testarlo. AFAIK, IE9 manca del supporto segnaposto: http://caniuse.com/#search=placeholder –

funziona come un incantesimo per me. Non ho provato in IE però, ovviamente. – Sethen

Prova questo:

HTML

<input type='text' placeholder='Enter text' />

CSS

input[placeholder]:focus { color: red; }

fonte

2012-11-01 18:37:52

attivo non è a fuoco. – BoltClock

Sì, grazie. –

Non era necessario, ma ho il sospetto che sia perché, a un'ulteriore ispezione, il tuo codice colorerebbe il valore reale dell'input su focus, anziché solo il suo testo segnaposto. – BoltClock

ho trovato questa soluzione con JQuery:

$('input[type="text"]').each(function(){ 

    $(this).focus(function(){ 
     $(this).addClass('input-focus'); 
    }); 

    $(this).blur(function(){ 
     $(this).removeClass('input-focus'); 
    }); 

    });

con questo css:

.input-focus::-webkit-input-placeholder { color: #f00; }  
.input-focus:-moz-placeholder { color: #f00; } 
.input-focus:-ms-input-placeholder { color: #f00; }

fonte

2012-11-01 18:56:44

Non hai bisogno di jQuery per questo ... – BoltClock

JQuery è bello, ma deve morire. Tutto ciò che ha un inizio ha una fine, @DavidePalmieri – Edakos

WTH sei su @BoltClock. Certo che ha bisogno di jQuery ... Se ha bisogno di qualcosa, jQuery! – PeeHaa

Oltre a Pranav risposta che ho affinato il codice con compatibilità textarea :

::-webkit-input-placeholder { color: #999; } 
:-moz-placeholder { color: #999; } 

:focus::-webkit-input-placeholder { color: #ccc; } 
:focus:-moz-placeholder { color: #ccc; }

fonte

2012-11-01 20:06:55

Cercato ovunque per questo. Funziona. Grazie! – Luke

Da Firefox 19: La pseudo-classe: -moz-placeholder che corrisponde agli elementi del modulo con l'attributo placeholder è stata rimossa e lo pseudoelemento :: - moz-placeholder è stato invece aggiunto.

input:focus::-moz-placeholder { color: transparent; }

fonte

2013-02-23 21:23:12

Usa stella * per selezionare tutto

*::-webkit-input-placeholder { color: #999; } 


*:-moz-placeholder { color: #999; } 


*::-moz-placeholder { color: #999; } 


*:-ms-input-placeholder { color: #999; }

fonte

2014-10-02 00:56:49 KeepMove

-1

È possibile creare un disegno animato segnaposto materiale che si restringe in alto quando il campo di ingresso è a fuoco.

<div class="field"> 
<input type="text" name="user" required><br> 
<label>Enter Username</label> 
</div>

Fondamentalmente il campo etichetta si comporta come un segnaposto. Possiamo farlo solo usando css. spiegato qui http://www.voidtricks.com/create-material-design-animated-placeholder/

fonte

2015-10-26 12:17:53

Di seguito ha lavorato per me:

input:focus::-webkit-input-placeholder 
{ 
    color: red; 
}

fonte

2018-01-02 16:15:05 Bel

Come modificare il colore del segnaposto sullo stato attivo?

risposta

Problemi correlati