代码示例: input[type="password"]{ background-color:#F0F0F0; border:1px solid #CCCCCC; border-radius:5px; } input[type="password"]:focus{ background-color:#FFFFFF; border:1px solid #AAAAAA; }
上面这段css代码主要通过两个选择器来实现改变密码框颜色的功能。第一个选择器是为了设置密码框的基本样式,如背景色、边框和圆角等。第二个选择器则是为了设置密码框在获得焦点时的样式。
通过这两个选择器的设置,可以让密码框在默认状态下为灰色,当用户在密码框中输入时,密码框的颜色会变为白色,并且边框的颜色也会变浅,这样不仅能提高用户输入密码的体验,还能让网页看起来更加美观。