Chrome display issue with input tag - html

Question

I have the following code:
.searchdiv {
width: 140px;
height: 35px;
margin-left: 17px;
margin-top: 12px;
border-width: 2px;
border-style: solid;
border-radius: 4px;
border-color: #707070;
}
.searchbox {
padding: 3px;
font-size: 16px;
font-weight: bold;
background-color: #121212;
color: #6b6b6b;
border-color: #121212;
width: 100px;
height: 25px;
}
.searchbox:focus {
outline: none;
}
.maglass {
position: fixed;
top: 57px;
left: 125px;
}
.maglass:focus {
outline: none;
}
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</img>
</form>
</div>
When I run this, It outputs as:
I would like to know what causes the black border, since none of the colors I specified include it.
I tried removing the border-color property, but that causes the entire border to be grey.

Answer 1

Why does the black(ish) border show up on Chrome?
The issue is because of the default UA settings in Chrome for the input box. The value is by default set to inset (can be seen from the Developer Console) and this is the one that seems to be causing the blackish (it is not black, it seems to be a semi-transparent black) inset border on the element.
The problem is more apparent to see when the border and background colors are changed. I have set some high contrast colors in the below snippet to visualize it.
.searchdiv {
width: 140px;
height: 35px;
margin-left: 17px;
margin-top: 12px;
border-width: 2px;
border-style: solid;
border-radius: 4px;
border-color: #707070;
}
.searchbox {
padding: 3px;
font-size: 16px;
font-weight: bold;
background-color: #121212;
color: #6b6b6b;
border-color: #121212;
width: 100px;
height: 25px;
}
.searchbox:focus {
outline: none;
}
.maglass {
position: fixed;
top: 57px;
left: 125px;
}
.maglass:focus {
outline: none;
}
/* Just for demo */
.searchbox.contrast {
background-color: yellow;
border-color: yellow;
}
.searchdiv {
margin-top: 20px;
}
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</form>
</div>
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox contrast" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</form>
</div>
What is the solution?
The solution to this is very simple. Just override the default border-style and set it to solid like in the below snippet.
.searchdiv {
width: 140px;
height: 35px;
margin-left: 17px;
margin-top: 12px;
border-width: 2px;
border-style: solid;
border-radius: 4px;
border-color: #707070;
}
.searchbox {
padding: 3px;
font-size: 16px;
font-weight: bold;
background-color: #121212;
color: #6b6b6b;
border-style: solid;
border-color: #121212;
width: 100px;
height: 25px;
}
.searchbox:focus {
outline: none;
}
.maglass {
position: fixed;
top: 57px;
left: 125px;
}
.maglass:focus {
outline: none;
}
/* Just for demo */
.searchbox.contrast {
background-color: yellow;
border-color: yellow;
}
.searchdiv {
margin-top: 20px;
}
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</form>
</div>
<div class="searchdiv">
<form action="/search.njs" method="GET">
<input class="searchbox contrast" type="text" name="query" value="" />
<input class="maglass" type="image" src="/res/maglass.png">
</form>
</div>