修改placeholder的样式
2018-06-24 02:08:51来源:未知 阅读 ()
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了。
1 ::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */ 2 :-moz-placeholder{} /* Firefox版本4-18 */ 3 ::-moz-placeholder{} /* Firefox版本19+ */ 4 :-ms-input-placeholder{} /* IE浏览器 */ 5 注1:冒号前写对应的input或textarea元素等。 6 注2:placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占位文本。
css代码:
1 #input-test{ 2 color: #FFC0CB; 3 font-size: 1.2em; 4 width: 180px; 5 height: 36px; 6 } 7 #input-test::-webkit-input-placeholder{ 8 color: #ADD8E6; 9 } 10 #input-text::-moz-placeholder{11 color: #ADD8E6; 12 } 13 #input-text:-ms-input-placeholder{14 color: #ADD8E6; 15 }
HTML代码:
1 <div id="container"> 2 <input id="input-test" type="text" placeholder="修改placeholder样式" /> 3 </div>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:CSS列表及导航条
下一篇:那些容易遗忘的web前端问题
- Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题 2020-05-31
- css:chorm调试工具(修改样式、重置缩放比例、错误提示) 2020-05-30
- 美化博客园样式 2020-05-17
- 9.使用CSS样式,自己制作单选框样式和选中功能 2020-04-11
- css 自定义滚动条样式 2020-04-07
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash