2

I have this code working perfectly in chrome and Internet Explorer.But whenever I combine the CSS style like below, It is only working in Internet explorer but not in chrome.

Does anybody about this peculiar behavior?

.searchBar{
 height:50px;
 width:200px;
 background-color:#9a005f;
 color:#fff;
}
.searchBar:focus{
 background-color:#9a445f;
}
.searchBar::-webkit-input-placeholder{
color:#fff;
}
.searchBar::-ms-input-placeholder{
 color:#fff;
}
<input type="text" class="searchBar" placeholder="Search for..."/>

EDIT : The below is not working in my chrome but working in IE.

.searchBar{
 height:50px;
 width:200px;
 background-color:#9a005f;
 color:#fff;
}
.searchBar:focus{
 background-color:#9a445f;
}
.searchBar::-webkit-input-placeholder,
.searchBar::-ms-input-placeholder{
    color:#fff;
}
<input type="text" class="searchBar" placeholder="Search for..."/>
Pratyush
  • 525
  • 1
  • 8
  • 18

1 Answers1

8

I've done some search on internet and I've found what I believe is the answer to your question.

Don't mix the vendor prefix selectors (-moz, -webkit, -ms, ...). Chrome for example won't understand "-moz-" and then ignores the whole selector.

ziMtyth
  • 1,008
  • 16
  • 32