2013-03-19 20 views
17

Seguire questo articolo (Style text input placeholder), è possibile modificare il colore del segnaposto di input del testo in rosso. Ma è sempre un colore rosso chiaro, non esattamente rosso.Cambia colore segnaposto in input

C'è un modo per renderlo esattamente un colore rosso?

aggiornamento

Il colore su Chrome è rosso (questo è corretto), il colore su Firefox non è rosso, è rosso chiaro o offuscata, ho intuito che.

http://i279.photobucket.com/albums/kk132/svincoll4/2013-03-19_181239_zps84166305.png


EDIT (dalla risposta OP):

Si prega di controllare questo esempio (http://jsfiddle.net/LQkQG/), il colore è rosso su Chrome, ma light-red su Firefox. Voglio il colore su Firefox stesso con Chrome.

risposta

42

ho trovato hai bisogno di sovrascrivere l'opacità.

::-webkit-input-placeholder { /* WebKit browsers */ 
    color: red; 
    opacity: 1 !important; 
} 
+1

Tu sei l'uomo. Grazie. –

+0

gnarly, non ho notato Chrome appeso all'opacità! –

+0

ora cambia solo il colore per i browser webkit :: - webkit-input-placeholder {/ * Browser WebKit */ colore: # 999; } : -moz-placeholder {/ * Mozilla Firefox 4 a 18 */ colore: # 999; } :: - moz-placeholder {/ * Mozilla Firefox 19+ */ colore: # 999; } : -ms-input-placeholder {/ * Internet Explorer 10+ */ colore: # 999; } – Ivo

15

Sì, impostando il suo valore tramite HEX (esadecimale) si ottiene un controllo migliore del colore da utilizzare. Il colore per il rosso acceso (il rosso che diventa) è #FF0000

Firefox, tuttavia, è necessario ribattere a un ribelle quale opacità utilizzare.

Per avere un riferimento di dare un'occhiata a this chart

::-webkit-input-placeholder { 
    color: #FF0000; 
    opacity: 1 !important; /* for older chrome versions. may no longer apply. */ 
} 

:-moz-placeholder { /* Firefox 18- */ 
    color: #FF0000; 
    opacity: 1 !important; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: #FF0000; 
    opacity: 1 !important; 
} 

:-ms-input-placeholder { 
    color: #FF0000; 
} 
+1

Questa risposta dovrebbe impostare l'opacità in ':: - moz-placeholder {}' poiché * Firefox * è il browser con l'opacità inferiore. – Mottie

-4

visita: http://www.w3schools.com/html/html_colors.asp

<html> 
<head> 
<style type="text/css"> 

    input, textarea { color: #000; } 
    .placeholder { color: #aaa; } 
</style> 
</head> 
<body> 
<form action="" method="post"> 

      <input type="text" name="user" placeholder="enter a text" /> 
      <input type="submit" value="submit" onclick="test()" /> 
</form> 

al posto del codice del colore è possibile scrivere che mai colore volete

+0

I selettori di classe CSS non hanno nulla a che fare con gli attributi HTML :) –