html5输入框输入有效的选择效果_前端知识文库_游芯沙盒

褪色发表于 2018-1-5 16:48:40

html5输入框输入有效的选择效果

本帖最后由褪色于 2018-1-30 17:57 编辑

html：
<link rel="stylesheet" type="text/css" >
<div class="exp-container">
<h2 class="exp-title">Using:valid selector in CSS</h2>
<div class="exp">
<input type="text" class="exp__input" id="example" name="test" placeholder="Full Name" required>
<label class="exp__label" for="example" data-icon="" data-icon-ok="">Full Name</label>
</div>
<div class="exp">
<input type="email" class="exp__input" id="example2" name="test" placeholder="Email" required>
<label class="exp__label" for="example2" data-icon="" data-icon-ok="">Email</label>
</div>
</div>

CSS：
html,
body {
background-color: #F4F4F4;
display: flex;
width: 100%;
height: 100%;
align-items: center;
font-family: "Work Sans", sans-serif;
justify-content: center;
}


.exp-container {
width: 100%;
padding: 30px;
box-sizing: border-box;
max-width: 600px;
}


.exp {
display: flex;
flex-direction: column-reverse;
width: 100%;
margin-bottom: 30px;
position: relative;
flex-wrap: wrap;
}


.exp__label {
transition: 0.3s;
margin-bottom: 5px;
}


.exp__label:before {
content: attr(data-icon);
font-weight: normal;
font-family: "Ionicons";
font-size: 24px;
position: absolute;
left: 0;
transform: rotateY(90deg);
bottom: 0;
height: 52px;
background: transparent;
color: #000;
transform-origin: left;
display: flex;
align-items: center;
justify-content: center;
transition: color .3s 0s ease, transform .3s 0s ease;
width: 42px;
}


.exp__input {
border: 1px solid #ddd;
padding: 0 10px;
width: 100%;
height: 52px;
transition: 0.3s;
font-weight: normal;
box-sizing: border-box;
font-family: "Work Sans", sans-serif;
outline: none;
}


.exp__input:focus {
padding-left: 42px;
border-color: #bbb;
}


.exp__input:focus + label:before {
transform: rotateY(0deg);
}


.exp__input:valid {
padding-left: 42px;
border-color: green;
}


.exp__input:valid + label {
color: green;
}


.exp__input:valid + label:before {
transform: rotateY(0deg);
color: green;
font-size: 34px;
content: attr(data-icon-ok);
}


.exp-title {
text-align: center;
font-size: 22px;
margin-bottom: 30px;
font-weight: normal;
}


.exp-title span {
display: inline-block;
padding: 5px;
font-size: 22px;
background: #feffd4;
}

页: [1]

游芯沙盒's Archiver

html5输入框输入有效的选择效果