CSS3可展开搜索框在占位符中不能正常工作

Question

如果没有单击搜索图标，我想隐藏占位符。这有可能吗？如果这是可能的话，我该如何解决这个问题呢？

<form id="demo-2">
  <input type="search" placeholder="some text" />
</form>

CSS

input { outline: none; }
input[type=search] {
    font-family: inherit; 
    font-size: 100%; 
    -webkit-appearance: textfield; 
    -webkit-box-sizing: content-box;
}

input::-webkit-search-decoration, input::-webkit-search-cancel-button
   { display: none; }

input[type=search] { 
    background:url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px; 
    border:none; 
    height:35px; 
    -moz-transition: all .5s; 
    transition: all .5s; }


#demo-2 input[type=search] {
    width: 100px;
    padding-left: 10px;
    color: transparent;
    cursor: pointer;
}

#demo-2 input[type=search]:focus {
    background:url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
    width: 626px;
    padding-left: 32px;
    color: #000;
    background-color: #fff;
    cursor: auto;
}


#demo-2 input:-moz-placeholder { color:red; }
#demo-2 input::-webkit-input-placeholder { color:red; }

JSFiddle演示

对不起我的英语不好。谢谢你的回答。

Answer 1

尝试将onfocus和onblur属性添加到input中

<input type="search" onfocus="placeholder='some text'" onblur="placeholder=''" />

小提琴：http://jsfiddle.net/dW92N/3/

Answer 2

啊，我自己找到答案..。

#demo-2 input:-moz-placeholder { color:transparent; }
#demo-2 input::-webkit-input-placeholder { color:transparent; }
#demo-2 input:focus::-webkit-input-placeholder { color:red }
#demo-2 input:focus:-moz-placeholder { color:red; }