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 增加权重。

目录
相关文章
|
9月前
|
JavaScript
placeholder和value的区别
placeholder和value的区别
|
5月前
|
JavaScript
v-model指令获取常见表单项的内容 input,textarea,radio,checkbox,select
本文介绍了Vue.js中v-model指令的作用和语法,并通过示例代码展示了如何使用v-model来获取不同类型的表单元素(如文本输入框、文本域、复选框、单选框和下拉菜单)的内容。
|
JavaScript
input中placeholder属性
input中placeholder属性
input中placeholder属性
input[type="radio"]自定义样式
input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式。怎么做呢?其实很简单,只要抓住3点。分别是1.label 2.隐藏自带样式 3.绘制我们的样式。
1218 0
|
前端开发
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
使用 div 实现 input、textarea 输入框,并支持 placeholder 属性(解决浏览器兼容问题)
248 0
|
前端开发 JavaScript 数据安全/隐私保护
|
前端开发
使input type=“text“不可编辑
使input type=“text“不可编辑
365 0
使input type=“text“不可编辑
|
JavaScript 数据安全/隐私保护 API
MUI框架之输入框Input
input输入框的官方api文档:http://dev.dcloud.net.cn/mui/ui/#input 一、输入框类型 输入框的类型是根据type来决定是普通输入框还是密码框,搜索框等类型 <label>帐号</label> <input id="mess" class="mui-inpu.
2909 0

热门文章

最新文章