<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" >就可以