我试图建立这个形式，但我想知道我如何样式"选择"在CSS类似的方式，我做了其他输入字段。所有我想要的是出现"选择性别"的底部边界线以上，它转换为-20px选择数据。请尝试一下，让我知道如何以类似的方式设置上面提到的样式。
*{
margin:0;
padding:0;
outline:none;
box-sizing:border-box;
font-family: "poppins", sans-serif;
}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
padding:40px;
background: linear-gradient(115deg, #56d8e4 10%,#9f01ea 90%);
}
.container{
background:#fff;
width:800px;
max-width:800px;
padding: 25px 40px 10px;
box-shadow: 25px 40px 10px 40px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.container .text{
font-size:35px;
font-weight:600;
text-align:center;
background: -webkit-linear-gradient(right, #56d8e4,#9f01ea );
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.container form{
padding: 30px 0 0 0 0;
}
.container .form-row{
display: flex;
margin: 32px 0;
}
form .form-row .input-data{
width:100%;
height: 40px;
margin: 0 20px;
position:relative;
}
.textarea{
height:70px;
}
.input-data select{
background: none;
text-align: center;
}
.input-data input:focus ~ label,
.textarea textarea:focus ~ label,
.input-data select:focus ~ label
.input-data input:valid ~ label,
.textarea textarea:valid ~ label,
.input-data select:valid ~ label{
transform: translateY(-20px);
color:#3498db;
font-size: 14px;
pointer-events:none;
transition: all 0.3s ease;
}
.input-data input,
.input-data select,
.textarea textarea{
display:block;
height:100%;
width:100%;
border:none;
font-size: 17px;
border-bottom:2px solid rgba(0,0,0,0.12);
}
.textarea textarea{
resize:none;
padding-top:10px;
}
.input-data label{
position:absolute;
bottom: 10px;
font-size:16px;
pointer-events:none;
transition: all 0.3s ease;
}
.textarea label{
width:100%;
bottom:30px;
background:#fff;
}
.input-data .underline{
position:absolute;
bottom:0;
height: 2px;
width:100%;
background:#3498db;
}
.input-data .underline:before,
.input-data .underline:after{
position:absolute;
content:"";
height: 100%;
width: 100%;
background: #3498db;
transform: scaleX(0);
transform-origin:center;
transition: all 0.3s ease;
}
.input-data input:focus ~ .underline:before, .underline:after,
.textarea textarea:focus ~ .underline:before, .underline:after,
.input-data select:focus ~ .underline:before, .underline:after,
.input-data input:valid ~ .underline:before, .underline:after,
.textarea textarea:valid ~ .underline:before, .underline:after,
.input-data select:valid ~ .underline:before, .underline:after{
transform: scaleX(1);
}
.submit-btn .input-data{
height: 45px !important;
width:25% !mportant;
overflow:hidden;
}
.submit-btn .input-data:hover .inner{
left:0;
}
.submit-btn .input-data .inner{
height:100%;
width:300%;
position:absolute;
left:-100%;
background: -webkit-linear-gradient(right, #56d8e4,#9f01ea );
transition:all 0.3s ease;
}
.submit-btn .input-data input{
position:relative;
z-index: 2;
background:none;
border:none;
color:#fff;
font-size:17px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor:pointer;
}
@media(max-width:700px){
.container .text{
font-size: 30px;
}
.container form{
padding: 10px 0 0 0 0;
}
.container form .form-row{
display:block;
}
form .form-row .input-data{
margin: 35px 0 !important;
}
.submit-btn .input-data{
width:40% !important;
}
}<div class="container">
<div class="text"> Responsive Contact us form</div>
<form action="#">
<div class="form-row">
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label> First name</label>
</div>
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label> last name</label>
</div>
</div>
<div class="form-row">
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label> Email Address</label>
</div>
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label> Website name</label>
</div>
</div>
<div class="form-row">
<div class="input-data">
<select id="gender" name="gender">
<option disabled selected value> -- select an option -- </option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="others">Others</option>
</select>
<div class="underline"></div>
<label> Gender</label>
</div>
</div>
<div class="form-row">
<div class="input-data textarea">
<div class="underline"></div>
<textarea cols="30" rows="10" required></textarea>
<label> Message</label>
</div>
</div>
<div class="form-row submit-btn">
<div class="input-data">
<div class="inner"></div>
<input type="submit" Value="submit">
</div>
</div>
</div>
</form>
</div>function myFunction(x) {
x.style.display = "block";
}*{
margin:0;
padding:0;
outline:none;
box-sizing:border-box;
font-family: "poppins", sans-serif;
}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
padding:40px;
background: linear-gradient(115deg, #56d8e4 10%,#9f01ea 90%);
}
.container{
background:#fff;
width:800px;
max-width:800px;
padding: 25px 40px 10px;
box-shadow: 25px 40px 10px 40px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.container .text{
font-size:35px;
font-weight:600;
text-align:center;
background: -webkit-linear-gradient(right, #56d8e4,#9f01ea );
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.container form{
padding: 30px 0 0 0 0;
}
.container .form-row{
display: flex;
margin: 32px 0;
}
form .form-row .input-data{
width:100%;
height: 40px;
margin: 0 20px;
position:relative;
}
.textarea{
height:70px;
}
.input-data select{
background: none;
text-align: left;
}
.input-data input:focus ~ label,
.textarea textarea:focus ~ label,
.input-data select:focus ~ label
.input-data input:valid ~ label,
.textarea textarea:valid ~ label,
.input-data select:valid ~ label{
transform: translateY(-20px);
color:#3498db;
font-size: 14px;
pointer-events:none;
transition: all 0.3s ease;
}
.input-data input,
.input-data select,
.textarea textarea{
display:block;
height:100%;
width:100%;
border:none;
font-size: 17px;
border-bottom:2px solid rgba(0,0,0,0.12);
}
.textarea textarea{
resize:none;
padding-top:10px;
}
.input-data label{
position:absolute;
bottom: 10px;
font-size:16px;
pointer-events:none;
transition: all 0.3s ease;
}
.textarea label{
width:100%;
bottom:30px;
background:#fff;
}
.input-data .underline{
position:absolute;
bottom:0;
height: 2px;
width:100%;
background:#3498db;
}
.input-data .underline:before,
.input-data .underline:after{
position:absolute;
content:"";
height: 100%;
width: 100%;
background: #3498db;
transform: scaleX(0);
transform-origin:center;
transition: all 0.3s ease;
}
.input-data input:focus ~ .underline:before, .underline:after,
.textarea textarea:focus ~ .underline:before, .underline:after,
.input-data select:focus ~ .underline:before, .underline:after,
.input-data input:valid ~ .underline:before, .underline:after,
.textarea textarea:valid ~ .underline:before, .underline:after,
.input-data select:valid ~ .underline:before, .underline:after{
transform: scaleX(1);
}
.submit-btn .input-data{
height: 45px !important;
width:25% !mportant;
overflow:hidden;
}
.submit-btn .input-data:hover .inner{
left:0;
}
.submit-btn .input-data .inner{
height:100%;
width:300%;
position:absolute;
left:-100%;
background: -webkit-linear-gradient(right, #56d8e4,#9f01ea );
transition:all 0.3s ease;
}
.submit-btn .input-data input{
position:relative;
z-index: 2;
background:none;
border:none;
color:#fff;
font-size:17px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor:pointer;
}
@media(max-width:700px){
.container .text{
font-size: 30px;
}
.container form{
padding: 10px 0 0 0 0;
}
.container form .form-row{
display:block;
}
form .form-row .input-data{
margin: 35px 0 !important;
}
.submit-btn .input-data{
width:40% !important;
}
}<div class="container">
<div class="text"> Responsive Contact us form</div>
<form action="#">
<div class="form-row">
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label> First name</label>
</div>
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label> last name</label>
</div>
</div>
<div class="form-row">
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label> Email Address</label>
</div>
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label> Website name</label>
</div>
</div>
<div class="form-row">
<div class="input-data">
<select id="gender" name="gender">
<option disabled selected value>Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="others">Others</option>
</select>
<div class="underline"></div>
<label style="display:none;" onfocus="myfunction()"> Gender</label>
</div>
</div>
<div class="form-row">
<div class="input-data textarea">
<div class="underline"></div>
<textarea cols="30" rows="10" required></textarea>
<label> Message</label>
</div>
</div>
<div class="form-row submit-btn">
<div class="input-data">
<div class="inner"></div>
<input type="submit" Value="submit">
</div>
</div>
</div>
</form>
</div>
Expand sn*{
margin:0;
padding:0;
outline:none;
box-sizing:border-box;
font-family: "poppins", sans-serif;
}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
padding:40px;
background: linear-gradient(115deg, #56d8e4 10%,#9f01ea 90%);
}
.container{
background:#fff;
width:800px;
max-width:800px;
padding: 25px 40px 10px;
box-shadow: 25px 40px 10px 40px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.container .text{
font-size:35px;
font-weight:600;
text-align:center;
background: -webkit-linear-gradient(right, #56d8e4,#9f01ea );
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.container form{
padding: 30px 0 0 0 0;
}
.container .form-row{
display: flex;
margin: 32px 0;
}
form .form-row .input-data{
width:100%;
height: 40px;
margin: 0 20px;
position:relative;
}
.textarea{
height:70px;
}
.input-data select{
background: none;
text-align: left;
}
.input-data input:focus ~ label,
.textarea textarea:focus ~ label,
.input-data select:focus ~ label
.input-data input:valid ~ label,
.textarea textarea:valid ~ label,
.input-data select:valid ~ label{
transform: translateY(-20px);
color:#3498db;
font-size: 14px;
pointer-events:none;
transition: all 0.3s ease;
}
.input-data input,
.input-data select,
.textarea textarea{
display:block;
height:100%;
width:100%;
border:none;
font-size: 17px;
border-bottom:2px solid rgba(0,0,0,0.12);
}
.textarea textarea{
resize:none;
padding-top:10px;
}
.input-data label{
position:absolute;
bottom: 10px;
font-size:16px;
pointer-events:none;
transition: all 0.3s ease;
}
.textarea label{
width:100%;
bottom:30px;
background:#fff;
}
.input-data .underline{
position:absolute;
bottom:0;
height: 2px;
width:100%;
background:#3498db;
}
.input-data .underline:before,
.input-data .underline:after{
position:absolute;
content:"";
height: 100%;
width: 100%;
background: #3498db;
transform: scaleX(0);
transform-origin:center;
transition: all 0.3s ease;
}
.input-data input:focus ~ .underline:before, .underline:after,
.textarea textarea:focus ~ .underline:before, .underline:after,
.input-data select:focus ~ .underline:before, .underline:after,
.input-data input:valid ~ .underline:before, .underline:after,
.textarea textarea:valid ~ .underline:before, .underline:after,
.input-data select:valid ~ .underline:before, .underline:after{
transform: scaleX(1);
}
.submit-btn .input-data{
height: 45px !important;
width:25% !mportant;
overflow:hidden;
}
.submit-btn .input-data:hover .inner{
left:0;
}
.submit-btn .input-data .inner{
height:100%;
width:300%;
position:absolute;
left:-100%;
background: -webkit-linear-gradient(right, #56d8e4,#9f01ea );
transition:all 0.3s ease;
}
.submit-btn .input-data input{
position:relative;
z-index: 2;
background:none;
border:none;
color:#fff;
font-size:17px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor:pointer;
}
@media(max-width:700px){
.container .text{
font-size: 30px;
}
.container form{
padding: 10px 0 0 0 0;
}
.container form .form-row{
display:block;
}
form .form-row .input-data{
margin: 35px 0 !important;
}
.submit-btn .input-data{
width:40% !important;
}
}<div class="container">
<div class="text"> Responsive Contact us form</div>
<form action="#">
<div class="form-row">
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label> First name</label>
</div>
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label> last name</label>
</div>
</div>
<div class="form-row">
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label> Email Address</label>
</div>
<div class="input-data">
<input type="text" required>
<div class="underline"></div>
<label> Website name</label>
</div>
</div>
<div class="form-row">
<div class="input-data">
<select id="gender" name="gender">
<option disabled selected value>Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="others">Others</option>
</select>
<div class="underline"></div>
<label style="display:none;"> Gender</label>
</div>
</div>
<div class="form-row">
<div class="input-data textarea">
<div class="underline"></div>
<textarea cols="30" rows="10" required></textarea>
<label> Message</label>
</div>
</div>
<div class="form-row submit-btn">
<div class="input-data">
<div class="inner"></div>
<input type="submit" Value="submit">
</div>
</div>
</div>
</form>
</div>