解决html中input的placeholder的颜色,点击时消失,input点击时样式的问题

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,692评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,618评论 4 61
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,744评论 3 184
  • 我需要你那张黑衣服带花的照片的原图。给我好不好?发微邮箱吧。_为什么啊,你要干嘛啊我想洗张照片嘛。给我嘛。洗来干嘛...
    风的祝福阅读 2,773评论 0 0
  • 老柴说:互联网+,对家装行业来说,都是伪命题! 装修行业一直是个竞争非常激烈的行业,但面对信息爆炸的互联网时代,大...
    东尼日记阅读 1,333评论 0 0

友情链接更多精彩内容