</div>复制代码
CSS：
.input_money {
position: relative;
top: 0;
left: 0;
width: 223px;
height: 34px;
background-color: #cfa2a2;
input {
width: 100%;
height: 100%;
background-color: #f0f0f0;
padding: 10px 7px;
box-sizing: border-box;
font-size: 14px;
color: #333;
}
em {
display: none;
position: absolute;
top: 0;
left: 2px;
font-size: 14px;
padding: 10px 0;
}
}复制代码
input框禁止输入
⼀、焦距时将之前隐藏的单位进⾏显⽰
主要是使⽤ :focus 伪类进⾏，焦距时样式改变
input:focus {
padding-left: calc(1em + 3px);
&+em {
display: block;
}
}复制代码
⼆、失焦时，判断input中是否有值，如果有值，则将单位显⽰，如果没有值，则恢复初始状态
主要是使⽤ input 中的 required 和 :valid 伪类进⾏验证判断
input:valid {
padding-left: calc(1em + 3px);
&+em {
display: block;
}
}复制代码
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
豫公网安备41160202000602
发表评论