Tenho a seguinte caixa de pesquisa cujo placeholder
é personalizado inclusive no hover
, entretanto quando altero para o modo de alto contraste do site, ela não altera a cor do placeholder
quando em hover
. Notem que ao passar o mouse sobre a caixa em alto contraste, o placeholder
fica vermelho (estilo padrão), e não amarelo, como esperado. O que pode estar acontecendo neste caso? Grato!
Segue o código:
$(".bt-tema").on("click", function(e) {
$('body').toggleClass("escuro");
});
#myInput:hover::placeholder {color:#D80000; opacity:1}
#myInput:focus::placeholder {color:#000; opacity:1}
#myInput:hover:-ms-input-placeholder, #myInput:hover::-ms-input-placeholder {color:#D80000}
#myInput:focus:-ms-input-placeholder, #myInput:focus::-ms-input-placeholder {color:#000}
#myInput {background:url('http://w3schools.com/css/searchicon.png') 10px 6px no-repeat #fff; width:95%; font-size:13px; font-family:Open Sans; color:#000; padding:8px 40px; border:1px solid #bbb; transition:all 0.3s; margin:6px 0; margin-left:6px; outline:none; border-radius:50px; transition:all 0.3s}
#myInput:hover {border:1px solid #D80000}
#myInput:focus {outline: 0; border-color:#fff!important; background:#fff; color:#333; box-shadow:0 5px 10px rgba(0,0,0,.3)}
.escuro #myInput:focus {border:1px solid transparent}
.escuro #myInput:focus {box-shadow:0 5px 10px rgba(255,255,255,.3)}
.escuro #myInput {color:#ff0; background:url('http://images.applevacations.com/appleweb/images/icon-maginify.png') 10px 6px no-repeat #000}
.escuro #myInput:hover:-ms-input-placeholder, .escuro #myInput:hover::-ms-input-placeholder, .escuro #myInput:focus:-ms-input-placeholder, .escuro #myInput:focus::-ms-input-placeholder, .escuro #myInput:hover::placeholder, .escuro #myInput:focus::placeholder {color:#ff0!important; opacity:1!important}
.escuro #myInput:hover {border:1px solid #ff0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<input id='myInput' placeholder='Pesquisar texto...' title='Digite algo...' type='text'>
<a title='Ativar/Desativar o alto contraste' href="#" class="bt-tema">Alto Contraste</a>
</body>