在工作项目中,是用到input框焦距和失焦时,显示输入的单位。用js方法很简单,但是偶然想到是否可以用纯css来实现?
经过实验是可以实现的。
HMTL:
<div class="input_money ">
<em class="hideEm">¥</em>
<input type="number" class='isInput' placeholder="请输入提现金额" required>
</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;
}
}
一、焦距时将之前隐藏的单位进行显示
主要是使用 :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;
}
}