placeholder字体颜色变化及onblur事件在input中的使用
2015-09-27 00:00
489 查看
摘要: css3中placeholder字体颜色的设置,以及运用js onblur事件设置input框文字输入前后颜色的变化
css3中placeholder字体颜色的设置
placeholder 默认字体为灰色,有三种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)和Notihing。WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素;Mozilla Firefox 4-18使用伪类;Mozilla Firefox 19+ 使用伪元素;IE10使用伪类
因浏览器的css选择器的差异,要做出单独的设定。
2.js onblur事件控制input框文字输入前后颜色的变化
3.input中placeholder,js的结合使用
css3中placeholder字体颜色的设置
placeholder 默认字体为灰色,有三种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)和Notihing。WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素;Mozilla Firefox 4-18使用伪类;Mozilla Firefox 19+ 使用伪元素;IE10使用伪类
因浏览器的css选择器的差异,要做出单独的设定。
HTML <input type = "text" class="h1" placeholder="username" /> <input type = "textarea" class="h1" placeholder="username" />
CSS .h1{ height:37px; border:0; color:#666; width:236px; font-size:16pt; } ::-webkit-input-placeholder { /* WebKit browsers */ color:#0000CD; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#0000CD; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#0000CD; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color:#0000CD; } //or input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } input:-moz-placeholder, textarea:-moz-placeholder { color:#666; } input::-moz-placeholder, textarea::-moz-placeholder { color:#666; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#666; }
2.js onblur事件控制input框文字输入前后颜色的变化
<input type="text" name="address" style="color:gray" value=" test" onfocus="if(this.value=='test'){this.value=''}; this.style.color='black';" onblur="if(this.value==''||this.value=='test') {this.value='test';this.style.color='gray';}">
3.input中placeholder,js的结合使用
<input type="password" placeholder="password" class="h2" onfocus="this.style.color='black';"/>
.h2{ height:37px; border:0; color:#666; width:236px; font-size:16pt; } ::-webkit-input-placeholder { /* WebKit browsers */ color:#0000CD; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#0000CD; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#0000CD; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color:#0000CD; }
相关文章推荐
- JAVA
- java 线程学习笔记(一)
- Ember.js 入门指南——路由切换的终止和回跳
- Java生成流水号(1)
- JedisCluster 客户端集成到Spring,java代码中的使用
- Hibernate面试问题集锦: 概述
- mybatis 环境搭建
- java 中的属性修饰符使用注意事项总结
- 单例模式(Singleton)
- java synchronized详解第二篇
- Java接口里定义成员变量 说明
- 《挪威的森林》杂记
- windows下文件共享配置
- windows添加用户账户
- 处理 允许远程协助连接这台计算机 灰色
- java虚拟机学习(四)类的加载过程
- iOS9系列专题二——全新的搜索功能api
- iOS9系列专题三——应用瘦身
- centos环境变量设置
- 通过yum安装redis