Question

除了IE之外，所有浏览器都能正常使用此脚本。我没有使用纯java或jquery。仅使用css。我认为问题在于过渡，但我不明白为什么。我该如何解决这个问题？

HTML

<form id="demo-2">
  <input type="search" onfocus="placeholder='some text'" onblur="placeholder=''" />
</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;
 }

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

抱歉我的英文不好，谢谢你的回答！

可扩展搜索框占位符在Internet Explorer 10中不起作用

0 个答案: