input标签选中样式设置及input密码框可视设置

input标签选中样式设置及input密码框可视设置

关于input标签样式使用的一些总结: 1、input标签选中时的光标紧贴边框的问题: input标签默认光标会紧贴边框,设置padding样式可解决;

2、input标签选中样式: input标签可对选中时的样式进行设置,同时要注意input标签外边框和内边框的影响。可通过box-shadow属性设置选中时的边框阴影。 3、input标签的type属性: input标签的type属性有多个属性值:button、checkbox、file、hidden、image、password、radio、reset、submit、text 其中最常用的是password和text属性。

4、关于input密码框(type=“password”)密码隐藏和可视的封装思路: input标签密码框模式下,默认状态是无法查看输入的密码的,都是小黑点替代,在与用户交互过程中会有诸多不便,使用户无法查看自己输入的密码,即使错误也不知道为啥错了。因此很多组件封装会加上小眼睛实现可视与隐藏的切换。 封装思路: input标签没有小眼睛的图标,所以我们要加入小图标。 (1)父标签下包含input标签和小图标(两个小图标,一个隐藏一个可视)。父标签设置position:relative;属性。 (2)小图标设置position:absolute;属性,设置top、bottom、right、left等值调整到你想要的位置。 (3)js控制。给小图标定义点击事件,根据点击切换图标,同时切换type="text"和type="password"属性的input框。两个input框绑定同一个接收password值的字段。

经验分享 程序员 微信小程序 职场和发展