集锦录首页投稿(暂停使用,暂停投稿)

解决html中input的placeholder的颜色,点击时消

2016-07-28  本文已影响2075人  eternalshallow
<input placeholder="暑期大促" onfocus="this.placeholder=''" onblur="this.placeholder='暑期大促'" type="text">

对于浏览器不兼容的,使用以下代码,更改placeholder的字体颜色等

.search-input input::-webkit-input-placeholder{
    color: #000;
}
.search-input input:-moz-placeholder{
    color: #000;
}
.search-input input::-moz-placeholder{
    color: #000;
}
.search-input input:-ms-input-placeholder{
    color: #000;
}

使用outline来控制点击input时input边框样式的改变

input{
  outline:none;
}

控制placeholder点击时消失文本,离开后文本重新显示,使用一个小小的js就可以了

onfocus="this.placeholder=''" /*点击的时候文本设置为空*/
onblur="this.placeholder='暑期大促'" /*离开的时候文本显示出来*/

将这一部分代码添加到<input placeholder="暑期大促" onfocus="this.placeholder=''" onblur="this.placeholder='暑期大促'" type="text" >就可以

上一篇下一篇

猜你喜欢

热点阅读