input placeholder 兼容性处理

简介: input placeholder 兼容性处理

正文


若要修改 <input /> 元素 placeholder 属性的样式,需要兼容多种浏览器,如下:


/* WebKit, Blink, Edge */
input::-webkit-input-placeholder {
  color: #eee !important;
  font-size: 16px !important;
}
/* Mozilla Firefox 19+ */
.input::-moz-placeholder {
  color: #eee !important;
  font-size: 16px !important;
}
/* Mozilla Firefox 4 to 18 */
.input:-moz-placeholder {
  color: #eee !important;
  font-size: 16px !important;
}
/* Internet Explorer 10-11 */
.input:-ms-input-placeholder {
  color: #eee !important;
  font-size: 16px !important;
}


设置不生效?


若设置 placeholder 的样式不生效,原因可能是在某些公共样式已经对 placeholder 进行设置了,再一次设置就会无效。

解决方法是,添加 !important 增加权重。

目录
相关文章
|
5月前
|
JavaScript
placeholder和value的区别
placeholder和value的区别
|
15天前
|
JavaScript
v-model指令获取常见表单项的内容 input,textarea,radio,checkbox,select
本文介绍了Vue.js中v-model指令的作用和语法,并通过示例代码展示了如何使用v-model来获取不同类型的表单元素(如文本输入框、文本域、复选框、单选框和下拉菜单)的内容。
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
input的23种属性
input的23种属性
18 1
|
5月前
|
Web App开发 前端开发 iOS开发
input中typedate的属性都有那些
input中typedate的属性都有那些
|
5月前
|
移动开发 自然语言处理 前端开发
input表单 type属性详解
input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下, 什么样的数据均可以输入。而通过不同的type属性值,可以限制输入的内容。
117 1
|
12月前
|
数据安全/隐私保护
input表单的23个type属性
input表单的23个type属性
112 0
|
前端开发
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
153 0
|
JavaScript
input中placeholder属性
input中placeholder属性
input中placeholder属性
|
前端开发
使input type=“text“不可编辑
使input type=“text“不可编辑
321 0
使input type=“text“不可编辑