1z10 1z10 - 6 months ago 11
CSS Question

Why do the border colors change on click?

I'm trying to make a searc-box with categories, like Amazon. Now the problem is that I can't understand why when I click inside the text are, borders change color creating a bad view effect. How can I stop it?
Here is the code:



$border-color: orange;
#form-wrapper {
width: 50%;
height: 40px;
}

.nav-list {
padding: 10px 25px 10px 5px;
position: relative;
float: left;
border: 1px solid $border-color;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

#dropdown {
cursor: pointer;
position: absolute;
height: 100%;
left: 0;
top: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid $border-color;
}

#dropdown:hover {
background-color: lightgray;
}

.current-selection {
display: inline-block;
font-size: 14px;
}

.in-wrap {
overflow: hidden;
height: 100%;
}

#search-box {
width: 100%;
height: 36px;
border: 1px solid $border-color;
border-left: none;
border-right: none;
line-height: 25px;
font-size: 18px;
padding-left: 100px;
}

.go-button {
float: right;
height: 100%;
background-color: orange;
border: 1px solid $border-color;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin: 0;
padding: 0 15px;
}

.go-button:hover {
background-color: rgb(255, 115, 0);
cursor: pointer;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="form-wrapper">
<button class="go-button fa fa-search"></button>
<span class="nav-list">
<span class="current-selection">
</span>
<select id="dropdown">
<option value="books-and-ebooks">Books & eBooks</option>
<option value="audiobooks">Audiobooks</option>
<option value="dvds">DVDs</option>
<option value="other-resources">Other Resources</option>
<option value="random">Random</option>
</select>
</span>
<div class="in-wrap">
<input type="text" name="query" id="search-box">
</div>
</div>





Now I realized that on JSFiddle is not working the same way as on codepen, so here is on codepen: http://codepen.io/1z10/pen/QEbjBx

Answer

It was happening because the browsers add outline on input field, to fix this you need to remove on input:focus the attribute outline, declaring this equals none. Like this CSS code:

#search-box:focus{
  outline:none;
}