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

小提琴：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; }

CSS3可扩展搜索框与占位符无法正常工作

2 个答案: