-1
Iam创建表格like如果输入创建值创建样式input + lable
但相同的选择不工作。请给我解决方案。html选择标记如果选项更改添加样式在选择
这是HTML
https://jsfiddle.net/novj38wc/2/这里代码
Iam创建表格like如果输入创建值创建样式input + lable
但相同的选择不工作。请给我解决方案。html选择标记如果选项更改添加样式在选择
这是HTML
https://jsfiddle.net/novj38wc/2/这里代码
请使用此代码尝试。
body {
background:#333;
}
.input-group {
position: relative;
padding: 16px 0;
margin: 0 16px;
}
.form-ctrl {
border-bottom: solid 1px #fff;
background: transparent;
padding: 8px;
width: 100%;
box-sizing: border-box;
border-width: 0 0 1px 0;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
color: #fff;
outline:0;
}
.form-ctrl option {
color:#000;
}
.input-group label {
position: absolute;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
color: #fff;
font-size: 16px;
top: 23px;
left: 8px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.input-group .form-ctrl:focus + label,
.input-group .form-ctrl:valid + label {
font-size: 12px;
top: 5px;
color: rgba(255, 255, 255, .54)
}
<div class="input-group">
<input id="name" name="name" class="form-ctrl" type="text" required>
<label for="name">Your Name*</label>
</div>
<div class="input-group">
<input id="Email" name="Email" type="text" class="form-ctrl" required>
<label for="Email">Your Email*</label>
</div>
<div class="input-group">
<input id="ContactNo" name="ContactNo" type="text" class="form-ctrl" required>
<label for="ContactNo">Contact No*</label>
</div>
<div class="input-group">
<select id="ContactType" name="ContactType" class="form-ctrl" required>
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<label for="ContactType">Contact Type*</label>
</div>
<div class="input-group">
<input id="WebsiteUrl" name="WebsiteUrl" type="text" class="form-ctrl" required>
<label for="WebsiteUrl">Website Url*</label>
</div>
从不只是发布代码 - 也添加一个解释:) – ThisGuyHasTwoThumbs
你的意思是标签? – ThisGuyHasTwoThumbs
它应该是'input + label',而不是'input + lable' – Morpheus
请提供一个[Minimal,Complete,and Verifiable example](https://stackoverflow.com/help/mcve)与你的问题(包括代码,不只是一个JSFiddle)。 – George