I'm having trouble developing a search input, as I am facing an issue and unable to find a solution.
Currently, the search input is working fine; when I click on it, it expands. However, once expanded and I start typing, the text color turns white whereas I'd prefer it to remain black.
Also, when I click outside the input box, the text color changes back to black instead of remaining white or gray as desired.
Does anyone know how to achieve this using CSS? Is there a way to make the text color stay white upon mouse leave instead of turning black?
Link to my CodePen:
http://codepen.io/mib/pen/saytl/
My HTML:
<li id="sb-search" style="float:right; list-style:none; height:20px;">
<form id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</li>
My CSS:
#search input[type="text"] {
border: 0 none;
font: 12px 'bariol_boldbold';
background: #141d22;
text-indent: 0;
width:110px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: #141d22;
color: #fff;
width: 170px;
outline:none;
color:000;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}