我有一些由CSS样式化的输入框,但是在某个输入框中我需要删除"required"属性。出于某种原因,这会改变CSS动画的行为。当"required"属性被添加到一个输入框时,它会改变动画的行为。你有什么解决方案吗?
HTML
请看我的js fiddle。 https://jsfiddle.net/97892awh/
<input type="text" class="form-input" autofocus required>
<span class="highlight"></span>
<span class="bar"></span>
<label class="form-label">Name</label>
<input type="text" class="form-input" autofocus>
<span class="highlight"></span>
<span class="bar"></span>
<label class="form-label">Name</label>
CSS
body {
background-color:#fff;
padding:40px;
}
.group {
position:relative;
margin-bottom:45px;
}
.form-input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:100%;
border:none;
border-bottom:1px solid #757575;
}
.form-input:focus { outline:none; }
/* LABEL ======================================= */
.form-label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
.form-input:focus ~ .form-label, .form-input:valid ~ .form-label {
top:-20px;
font-size:14px;
color:#d438c5;
}
/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:100%; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#d438c5;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
.form-input:focus ~ .bar:before, .form-input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
.form-input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
.form-select {
height: 47px;
background: transparent;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from { background:#d438c5; }
to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#d438c5; }
to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#d438c5; }
to { width:0; background:transparent; }
}
请看我的js fiddle。 https://jsfiddle.net/97892awh/