[英]input styling not applied right
I designed an input and I want the input look this way: https://codepen.io/YanivA5/pen/MWjQGod我设计了一个输入,我希望输入看起来像这样: https://codepen.io/YanivA5/pen/MWjQGod
but when I remove to the input required it look like that: https://codepen.io/YanivA5/pen/BaLYxdx但是当我删除所需的输入时,它看起来像这样: https://codepen.io/YanivA5/pen/BaLYxdx
input:focus
and input:valid
applied when page starts input:focus
和input:valid
在页面开始时应用
html html
<div class="inputContainer">
<input type="text" id="firstName" required>
<span class="highlight"></span>
<span class="bar"></span>
<label for="">שם פרטי</label>
<small>הבעיה תופיעה כאן</small>
</div>
styling造型
.inputContainer{
position: relative;
width: 200px;
margin: 45px 0;
}
.inputContainer input{
background: none;
color: rgb(0, 0, 0);
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 100%;
text-align: right;
border: none;
border-radius: 0;
border-bottom: 1px solid rgb(218, 218, 218);
}
.inputContainer input:focus {
outline: none;
}
.inputContainer input:focus ~ label,
.inputContainer input:valid ~ label {
top: -14px;
font-size: 12px;
color: rgb(37, 129, 235);
}
.inputContainer input:focus ~ .bar:before, input:valid ~ .bar:before{
width: 200px; transition: 0.4s; left: 0;
}
.inputContainer label{
color: rgb(0, 0, 0);
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
right: 5px;
top: 10px;
transition: 0.2s ease all;
}
.inputContainer .bar {
position: relative;
display: block;
width: fit-content;
}
.inputContainer .bar::before{
content: '';
height: 2px;
width: 0;
bottom: 0px;
position: absolute;
background: rgb(37, 129, 235);
transition: 0.3s ease all;
position: absolute; bottom: 0;
left: 100px;
width: 0;
height: 2px;
transition: 0.4s;
}
small{
color: rgb(243, 11, 11);
width: 200px;
margin-right: 5px;
float: right;
text-align: right;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.