I'm having trouble styling the search field in the topbar of my website. The topbar and icons have a blue background (#6495ed) with white icons, but the search container remains white. How can I make it blue?
I have tried setting the background to #6495ed for both the search input and button within the search container (a div). I've adjusted the margin and padding multiple times, but haven't found the right combination.
Interestingly, when I created a JsFiddle, I couldn't replicate the issue! Isn't that strange?
https://jsfiddle.net/r5uqb8v0/1/
Please refer to this picture for a visual explanation.
https://drive.google.com/file/d/1idQKbtKHaOT-QXByAMw1tXR9l9owMUlc/view?usp=sharing
The issue persists on both Chrome and Firefox.
I am working on Windows 10, using MySQL 5.7.22, PHP 7.2.4, and Apache 2.4.33 (WampServer).
Here is the HTML code for the search field:
<div class="item3 search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
And here is the CSS code:
.topnav .search-container {
border: none;
outline: none;
color: inherit;
padding: 0;
float: right;
background: #6495ed;
margin: 0;
text-decoration: none;
cursor: pointer;
}
.topnav .search-container input {
padding: 0px;
margin: 0;
border: none;
font-size: 1em;
display: none;
width: 100%; /* Full width */
cursor: pointer;
}
.topnav .search-container button {
font-size: 1.875em;
border: none;
outline: none;
color: white;
padding: 6px 10px;
background: #6495ed;
margin: 0;
display: inline;
cursor: pointer;
width: 100%; /* Full width */
}
While the topbar and icons have the correct blue background (#6495ed) and white icons, the search container remains white. Any suggestions or solutions would be greatly appreciated. Thank you for taking the time to read this!
Best regards,
Samuel