Placeholder color does not change when the mouse is over it in another theme

Navigation
2

I have the following search box whose placeholder is custom even in hover , however when I change to high contrast mode of the site, it does not change the color of placeholder when in hover . Note that hovering over the box in high contrast causes the placeholder to turn red (default style), not yellow, as expected. What could be happening in this case? Thanks!

Follow the code: 

$(".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><inputid='myInput'placeholder='Pesquisartexto...'title='Digitealgo...'type='text'><atitle='Ativar/Desativaroaltocontraste'href="#" class="bt-tema">Alto Contraste</a>
</body>
    
asked by anonymous 19.04.2018 / 15:35

2 answers

2

Vitor I can not explain exactly what happened, but your problem is in this "concatenation" of 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
    }

I made separating classes and resolved to see the result. 

$(".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><inputid='myInput'placeholder='Pesquisartexto...'title='Digitealgo...'type='text'><atitle='Ativar/Desativaroaltocontraste'href="#" class="bt-tema">Alto Contraste</a>
</body>

OBS: I left the comment in the CSS where I moved

    
19.04.2018 / 16:44
2

Complementing @hugocsl's response, the browser's CSS engine will only be able to apply a grouped selector (comma-separated) when it can interpret the whole rule. In this case, you are mixing prefixed -ms with non-prefixed rules. Therefore, the browser that does not recognize -ms will ignore the rule altogether.

So you have to separate the rules when there are prefixes, type -webkit , -ms , -moz etc ..

Example: 

-ms-estilo{ color:#ff0; opacity:1; }
-webkit-estilo{ color:#ff0; opacity:1; }
-moz-estilo{ color:#ff0; opacity:1; }
    
19.04.2018 / 16:52
Check if file input is in file or not Submit only one element of two with same name