一、修改input元素placeholder属性样式

在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholder样式(也有可能是遇到了一个处女座的设计师或者是客户),就不等不修改一下placeholder的样式。可以通过下面的代码修改样式:

/*Chrome、Safari等 webkit内核浏览器*/
::-webkit-input-placeholder{
color:red;
} /*Firefox*/
::-moz-placeholder{
color:red;
} /*IE、Edge等 Trident 内核浏览器*/
:-ms-input-placeholder{
color:red;
}

二、清除IE浏览器中input元素的删除和查看密码图标

在IE、Edge等 Trident 内核浏览器中,type = “text” 的 input元素中有输入时会出现清除图标,type = “password” 的 input元素中有输入时会出现眼睛图标。如图:

         

添加下面的样式可以去除默认图标:

::-ms-clear,
::-ms-reveal{
display: none;
}

修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标的更多相关文章

  1. element-ui修改表单自带验证的样式

    1.比如重写在表单自带验证的样式 .el-form-item__error是对应是的文字的类名,图标我是通过伪元素插进去的 下面是伪元素代码 基本上要重写样式的,到控制台看样式名,因为是封装的,所以有 ...

  2. CSS3过渡结束监听事件,清除/修改表单元素的一些默认样式

    document.querySelector('div').addEventListener('transitionEnd',function(){ console.log('过度结束') }) 如果 ...

  3. Jquary入门(添加 修改 表单元素)+ JSON+弹框

    字符串拼接 计算机语言 都是 对  数据的处理(获取/修改数据)  添加元素  除了  固定的方法添加 以外 都是   字符串拼接(拼接成固定格式即可执行). 1.表单添加元素  append() 方 ...

  4. input placeholder属性 样式修改(颜色,大小,位置)

    placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. jquery.form插件中动态修改表单数据

    jquery.form jquery.form插件(http://malsup.com/jquery/form/)是大家经常会用到的一个jQuery插件,它可以很方便将表单转换为ajax的方式进行提交 ...

  6. form表单与CSS选择器和样式操作

    form表单 """获取前端用户数据并发送给后端服务器""" <form action=""></fo ...

  7. form表单标签的enctype属性的作用

    Enctype是指定将数据回发到server时浏览器使用的编码类型.其编码类型有下面三种 一. application/x-www-form-urlencoded         这是通过表单发送数据 ...

  8. 统一修改表单参数(表单提交的空字符串统一转null)

    统一修改表单参数(表单提交的空字符串统一转null) 1.介绍: 我们业务中有时会遇到提交的表单中某个参数为空字符串,导致后台接受的为空字符串("")而不是我们理想中的null,会 ...

  9. javaweb修改表单参数---使用过滤器

    需求: 所有的字段要将空字符串转成null: 问题: 我们知道表单如果不写值的时候,传递到后台的不是null,而且是空字符串.那么怎么改成null呢? 解决: 使用过滤器,将请求的参数修改过后继续,再 ...

随机推荐

  1. Mego(03) - ORM框架的新选择

    前言 从之前的两遍文章可以看出ORM的现状. Mego(01) - NET中主流ORM框架性能对比 Mego(02) - NET主流ORM框架分析 首先我们先谈下一个我们希望的ORM框架是什么样子的: ...

  2. 你能选择出,前几个元素吗?使用纯css

    面试被问到 ,你能选择出前几个元素吗?括弧只能使用css 我当时是一脸懵逼... 回去的路上思考一路 终于想到了解决办法 虽然为时已晚 但是觉得很有意义... 首先要用到 否定选择器 : :not() ...

  3. ELK学习总结(3-3)elk的组合查询

    1.bool 查询: must: 必须 should:  可以满足,也可以不满足. must_not: minimum_should_match: 至少要x个匹配才算匹配成功 disable_coor ...

  4. setInterval()使用时易疏忽的点

    举个例子: 一道题目 这两个程序的区别就在于我向setInterval的参数一function写入了参数.这就是导致运行结果不尽如人意的原因. setInterval()方法可以接收三个参数,此参数会 ...

  5. AOP及专有名词通俗解答

    AOP面向切面编程,是一种编程思想,并不是Spring专有,Spring是封装代理模式完成,之前的博客中也写到了关于AOP的文章,Filter和代理,请见<以此之长,补彼之短----AOP(Fi ...

  6. Django快速入门

    Django 是用 Python 写的一个自由和开放源码 web 应用程序框架.web框架是一套组件,能帮助你更快.更容易地开发web站点.当你开始构建一个web站点时,你总需要一些相似的组件:处理用 ...

  7. hdu 6095 Rikka with Competition---思维题贪心

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=6095 题目大意: 任意两个人相比,相差大于K,分低的淘汰,否则两人都有可能赢,剩下的继续比,问有最多 ...

  8. Java面试题—中级(中)

    什么是线程死锁?死锁如何产生?如何避免线程死锁?   死锁的介绍:   线程死锁是指由于两个或者多个线程互相持有对方所需要的资源,导致这些线程处于等待状态,无法前往执行.当线程进入对象的synchro ...

  9. [Kaggle] dogs-vs-cats之模型训练

    上一步建立好模型之后,现在就可以训练模型了. 主要代码如下: import sys #将当期路径加入系统path中 sys.path.append("E:\\CODE\\Anaconda\\ ...

  10. 知物由学 | 基于DNN的人脸识别中的反欺骗机制

    "知物由学"是网易云易盾打造的一个品牌栏目,词语出自汉·王充<论衡·实知>.人,能力有高下之分,学习才知道事物的道理,而后才有智慧,不去求问就不会知道."知物 ...