html - 输入搜索在鼠标离开时将文本颜色更改为黑色

Question

我正在尝试开发搜索输入，但我遇到了问题，而且我找不到解决问题的方法。

我已经让输入搜索正常工作，当我点击输入时它会展开，但是当输入展开然后我写的时候，我写的文本是白色的，我想要这样。

但是当我在外部单击时，输入文本的颜色是黑色的，我也希望它是白色或灰色。

有人知道我们如何使用 CSS 做到这一点吗？鼠标离开时颜色是白色而不是黑色？

我的codePen文件:

http://codepen.io/mib/pen/saytl/

我的 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>

我的 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

将 color:#ffffff 添加到 #search input[type="text"] ，当鼠标离开 css 中的选择器时，颜色将为白色。

See demo