I am facing an issue with my search form that is supposed to look like this:
This is the sample HTML code for the search form:
<form method="post" action="#" class="search-form">
<input type="text" class="nav-search-input input-initial" data-initial='Search' value="Search">
<input type="submit" class="nav-search-submit" value=""><!-- The code represents the Glyphicons search icon -->
</form>
For styling, I have used Bootstrap, Bootstrap Responsive styles, and additional custom CSS for the search form:
.search-form{
display: block;
margin: 0;
}
input.nav-search-input,
input.nav-search-submit{
color: #eeeeee;
background-color: #181818;
border-top: 1px solid #303030;
border-bottom: 1px solid #303030;
}
input.nav-search-input{
/* Styling properties for nav-search-input */
}
input.nav-search-submit{
/* Styling properties for nav-search-submit */
}
The search form displays correctly on Chrome, Firefox, and Safari but has rendering issues on Opera version 12.02 due to padding inconsistencies. Despite trying suggested solutions from a relevant question on Stack Overflow, the problem persists. Adjusting padding to fix Opera's display messes up the appearance in other browsers.
A live demo of the page can be viewed here.
Note: Testing has not been conducted on Internet Explorer since I'm using a Mac.