CSS中密码输入框的密码显示是默认隐藏的,但我们可以利用CSS来修改其显示方式。下面我们来介绍一下如何实现。/* 设置密码输入框 */ input[type= password ] { /* 设置字体
CSS中密码输入框的密码显示是默认隐藏的,但我们可以利用CSS来修改其显示方式。下面我们来介绍一下如何实现。
/* 设置密码输入框 */ input[type="password"] { /* 设置字体颜色为黑色 */ color: #000; /* 设置显示方式为圆点 */ -webkit-text-security: disc; -moz-text-security: disc; text-security: disc; }
如上面代码所示,我们使用CSS的text-security属性来修改密码输入框的显示方式。text-security属性是一个CSS3属性,用于指定显示的文本的安全性。
其中,-webkit-text-security是为Chrome、Safari和Opera浏览器所支持的私有属性,类似地,-moz-text-security是为Firefox浏览器所支持的私有属性,text-security是为以上浏览器所支持的标准属性,它们的值可以是以下三种:
如果你想让密码输入框显示明文,可以这样做:
/* 明文显示密码输入框 */ input[type="password"] { /* 移除text-security样式 */ -webkit-text-security: none; -moz-text-security: none; text-security: none; }
通过上述CSS代码可以实现密码输入框的密码显示和明文显示,你可以根据自己的需要进行选择而不是只能看到圆点或者圆圈。
粉丝
0
关注
0
收藏
0