I have implemented a universal search bar on our website and it is working perfectly in Chrome and Safari. However, I am facing an issue with Firefox where the placeholder text is aligned to the bottom of the bar instead of the middle. Usually, placeholders are web-kit only, but for some reason, this behavior is showing up in FF as well. Here are the screenshots for comparison:
Chrome:
http://www.example.com/chrome-screenshot
Firefox:
http://www.example.com/firefox-screenshot
Below is the HTML code for the search bar:
<form action="#" id="nav_search_form">
<p><input type="text" placeholder="Search Careers And People" class="search" id="nav_search_q" /></p>
<input type="submit" style="visibility:hidden;">
<script type="text/javascript">
$('#nav_search_form').submit(function() {
Company.SearchBox.search();
return false;
});
</script>
</form>
And here is the CSS styling for the search bar:
input.search {
border:1px solid #bdbdbd;
padding:7px 10px 0 30px;
font:13px/15px "Helvetica Neue", Helvetica, Arial, sans-serif;
background:url(images/search.png) no-repeat 0 center;
color:#525252;
width:190px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
-o-border-radius:12px;
-ms-border-radius:12px;
-khtml-border-radius:12px;
border-radius:12px;
margin-top:17px;
margin-left: 0px;
}
input.search.placeholder {
color:#b3b3b3;
}
input.search:hover {
border-color:#8c8c8c
}
input.search:focus {
border-color:#39b2e5
}