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

Asked

Viewed 109 times

2

I have the following research box placeholder is customized even in the hover, however when I switch to the high contrast mode of the site, it does not change the color of the placeholder when in hover. Note that when passing the mouse over the box in high contrast, the placeholder turns red (standard style), not yellow, as expected. What might be going on in this case? Grateful!

Follows 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>
<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>

css css-hover placeholder

2 answers

2


Victor I can’t 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 did separating the classes and decided 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>
<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: I left the comment in CSS where I touched

  • 1

    Thanks again, @hugocsl. And mass also know what the dvd quoted about separating the rules when there are prefixes.

  • @Vítor yes, the most important thing is to know what we are doing so as not to make mistakes again. After I answered I went looking for this happens and before supplementing the DVD had already added rss.

2

Complementing the @hugocsl 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 case, you are mixing prefixed rules -ms not prefixed. Therefore, the browser that does not recognize -ms will ignore the rule altogether.

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

Example:

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

    That’s right, I just found a reference here http://bolinfest.com/webkit/placeholder.html

  • 1

    Here is a question related to this in the Soen https://stackoverflow.com/questions/16982449/why-isnt-it-possible-to-combine-vendor-specific-pseudo-elements-classes-into-on

  • Mass know that you quoted, @dvd, about separating the rules when there are prefixes. Thanks!

Browser other questions tagged css css-hover placeholder

You are not signed in. Login or sign up in order to post.