input输入后显示为星号或其他样式
时间: 2024-03-10 21:43:17 浏览: 152
您可以使用CSS样式来实现输入后显示为星号或其他样式的效果。具体做法是,使用CSS的伪元素`::placeholder`和`:-ms-input-placeholder`、`::-ms-input-placeholder`来设置输入框的占位符文本样式。
以下是一个简单的示例代码:
HTML代码:
```html
<input type="password" id="myInput" placeholder="请输入密码">
```
CSS代码:
```css
/* 隐藏输入框的光标 */
#myInput {
caret-color: transparent;
}
/* 显示带星的占位符文本 */
#myInput::placeholder,
#myInput:-ms-input-placeholder,
#myInput::-ms-input-placeholder {
color: transparent;
background: url(star.png) no-repeat center center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
padding-left: 20px;
}
```
当用户在输入框中输入文本时,输入框中将不会显示明文,而是显示为一个带星的占位符文本。同时,由于光标的颜色也被设置为透明,因此用户在输入时不会看到光标。
您可以自行调整CSS样式,以实现自己想要的输入框样式。
阅读全文