2

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>

2 Respostas 2

2

Vítor eu não sei explicar exatamente o que aconteceu, mas o seu problema é nessa "concatenação" de classes:

.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
    }

Fiz separando as classes e resolveu veja o resultado.

$(".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)}

/* correção das classes*/
.escuro #myInput:hover::placeholder {
    color: #ff0;
    opacity: 1
}
.escuro #myInput:hover:-ms-input-placeholder,
.escuro #myInput:hover::-ms-input-placeholder {
    color: #ff0
}

.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 {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>

OBS: deixei o comentário no CSS onde eu mexi

2
  • 1
    Obrigado, mais uma vez, @hugocsl. E massa também saber isso que o 'dvd' citou sobre separar as regras quando houver prefixos.
    – winiercape
    19/04/2018 às 17:02
  • @Vítor sim, o mais importante é saber o que a gente está fazendo pra não errar de novo. Depois que eu respondi fui procurar pq isso acontece e antes de complementar o Dvd já tinha acrescentado rss.
    – hugocsl
    19/04/2018 às 17:12
2

Complementando a resposta do @hugocsl, o motor CSS do navegador só conseguirá aplicar um seletor agrupado (separados por vírgula) quando ele consegue interpretar a regra toda. No caso, você está misturando regras prefixadas -ms com não prefixadas. Logo, o navegador que não reconhece -ms irá ignorar a regra por completo.

Por isso é preciso separar as regras quando houver prefixos, tipo -webkit, -ms, -moz etc..

Exemplo:

-ms-estilo{ color:#ff0; opacity:1; }
-webkit-estilo{ color:#ff0; opacity:1; }
-moz-estilo{ color:#ff0; opacity:1; }
3

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .