Input search is changing text color to black on mouse leave

Question

I´m trying to devellop a search input but I´m having an issue and I´m not finding a way to resolve my problem.

I already have the input search working, when I click in the input it expands, but When the input expands and then I write, I write text with white color and I want that like this.

But then when I click outside the input text color is black and I also wanted it to be white or gray.

Anyone there know how we can do this with CSS? On mouse leave the color be white and not black?

My codePen file:

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="Pesquisar..." />             
      </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);
    }

Answer 1

Add a white color to the input

Answer 2

Add color:#ffffff to #search input[type="text"] and color will be white when mouse leave selector in css.

See demo