html - CSS3 可扩展搜索框不能与占位符一起正常工作

Question

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

HTML

<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=''" />

fiddle :http://jsfiddle.net/dW92N/3/