2016-04-15 8 views
1

Ich muss den Stil des Platzhalters in meinem Framework ändern. Ich muss den instyle Platzhalter Stil überschreiben, den das Framework für mich einfügt. Um dies zu tun, habe ich den folgenden Code eingefügt:Platzhalter-Stil - Stil überschreiben, der! Wichtig verwendet

Dies funktioniert und macht alle Platzhalter diesen Stil. Das Problem ist, dass ich für Felder mit einer Klasse eine andere Farbe brauche. Um dies zu tun, habe ich:

::-webkit-input-placeholder .my_class { color:#000000!important;} 
    ::-moz-placeholder .my_class { color:#000000!important; } /* firefox 19+ */ 
    :-ms-input-placeholder .my_class { color:#FFFF000 !important; } /* ie */ 
    input:-moz-placeholder .my_class { color:#000000!important;} 

Dies funktioniert jedoch nicht. Die Platzhalter sind immer noch # FFFF00. Wie kann ich das erreichen?

+0

Warum Sie verwenden '! Important', nur die ursprüngliche Anweisung bearbeiten oder nach der Wiederholung Original mit deinen Einstellungen und die Kaskade sollte sich darum kümmern. –

Antwort

1

setzen .my_class vor den ::-x-placeholder Pseudoelemente

input {background:red;}/*added for contrast */ 
 

 

 
::-webkit-input-placeholder { color:#FFFF00 !important;} 
 
::-moz-placeholder { color:#FFFF00 !important; } /* firefox 19+ */ 
 
:-ms-input-placeholder { color:#FFFF00 !important; } /* ie */ 
 
input:-moz-placeholder { color:#FFFF00 !important;} 
 

 
.my_class::-webkit-input-placeholder { color:#000000!important;} 
 
.my_class::-moz-placeholder { color:#000000!important; } /* firefox 19+ */ 
 
.my_class:-ms-input-placeholder { color:#FFFF000 !important; } /* ie */ 
 
input.my_class:-moz-placeholder { color:#000000!important;}
<input placeholder="test"/> 
 
<input placeholder="test" class="my_class"/>

+0

Schön! Funktioniert genau so wie ich es will, vielen Dank! – user2924127

Verwandte Themen