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..."/>