一、修改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. Struts2之Struts2的下载与安装

    Struts2的下载 登陆struts的官网 下载Full Distribution这个选项的struts2的包. 这是Struts2的完整版,里面包括Struts2的实例应用,空实例应用,核心库,源 ...

  2. centos7.4下离线安装CDH5.7

    (一)安装前的规划 (1)操作系统版本:centos7.4(64bit) [root@hadoop22 etc]# more /etc/centos-release CentOS Linux rele ...

  3. Mock API是如何在开发中发光发热的?

    在长期的服务过程中,我们经常会遇到前来咨询的用户与我们反馈以下这种情况:咨询者是一个前端人员,在项目开发的过程中需要与后端进行对接,遇到后端还没完成数据输出的情况下,他只好写静态模拟数据,在遇到大型项 ...

  4. angular2 学习笔记 ( angular cli & npm version manage npm 版本管理 )

    更新 : 2017-05-05 现在流行 Yarn ! 它是 facebook google 推出的东西. 算是补助 npm 做的不够好的地方. 源码依然是发布去 npm,只是下载接口换掉罢了哦. n ...

  5. api-gateway实践(05)新网关工作 - 缓存定义

    一.缓存分类 1.服务注册信息 1.1.[GroupCode_VersionCode]对应[Version定义]的缓存                       缓存类型:hash         ...

  6. C++中构造函数的初始化列表(const、引用&变量初始化)

    1. 构造函数执行分为两个阶段: a.初始化阶段(初始化) 初始化阶段具体指的是用构造函数初始化列表方式来初始化类中的数据成员. ClassXX:val(a),key(b){}; b.普通计算阶段(赋 ...

  7. leetcode算法: Find the Difference

    Given two strings s and t which consist of only lowercase letters.String t is generated by random sh ...

  8. JavaScript中Array数组的方法

    查找: indexOf.lastIndexOf 迭代:every.filter.forEach.map.somereduce.reduceRight 用法: /* 1 查找方法: * arr.inde ...

  9. 判断ssh远程命令是否执行结束

    注:这是一个没什么鸟用的功能.不过也算是一种拓展. 通常在那些"一键化部署"的shell脚本中,可能需要使用ssh执行远程命令来实现一些简单的自动化,这些远程命令可能需要执行一段时 ...

  10. 百度echarts使用--y轴label数字太长难以全部显示

    问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就 ...