[英]How to make label float on top of select element?
这段代码对于输入来说效果很好,但是我不知道如何在选择元素上浮动标签。 选项类别默认情况下处于选中状态并处于禁用状态,而我想要的是仅当我单击“选择并选择类别”时,标签才会显示在选择元素的顶部。 这对于输入和占位符很好,但是我不能通过选择元素来实现。
<form>
<div class="form-group row">
<div class="col-sm-12">
<span class="has-float-label">
<select class="form-control" name="productType" id="productType" v-model="categoryId" data-vv-as="Kategoria" v-validate="'required|numeric'">
<option value disabled selected>Category *</option>
<option vaue="cat one">Cat one</option>
<option vaue="cat two">Cat two</option>
<option vaue="cat three">Cat three</option>
</select>
<label for="productType">Category *</label>
</span>
</div>
</div>
<div class="form-group row" >
<div class="col-12 col-sm-12 col-md-6">
<span class="has-float-label">
<input type="text"
class="form-control"
name="firstName"
id="firstName"
placeholder="Name *"
v-model="user.first_name"
data-vv-as="Name"
v-validate="'required|alpha_spaces'">
<label for="firstName">Emri*</label>
</span>
</div>
<div class="col-12 col-sm-12 col-md-6">
<span class="has-float-label">
<input type="text"
class="form-control"
name="lastName"
id="lastName"
placeholder="Last Name *"
v-model="user.last_name"
data-vv-as="Last Name"
v-validate="'required|alpha_spaces'">
<label for="secondName">Last Name *</label>
</span>
</div>
</div>
</form>
//===css===
.form-control{
margin: 10px 0;
}
.has-float-label {
display: block;
position: relative;
}
.has-float-label label, .has-float-label > span{
position: absolute;
left: 0;
top: 0;
cursor: text;
font-size: 75%;
opacity: 1;
transition: all .8s;
top: -.5rem;
left: 0.55rem;
z-index: 3;
line-height: 1;
padding: 0 1px;
}
.has-float-label label::after, .has-float-label > span::after {
content: " ";
display: block;
position: absolute;
background: white;
height: 2px;
top: 50%;
left: -.2em;
right: -.2em;
z-index: -1;
}
.has-float-label .form-control::-webkit-input-placeholder {
opacity: 1;
transition: all .8s;
}
.has-float-label .form-control::-moz-placeholder {
opacity: 1;
transition: all .8s;
}
.has-float-label .form-control:-ms-input-placeholder {
opacity: 1;
transition: all .8s;
}
.has-float-label .form-control::placeholder {
opacity: 1;
transition: all .8s;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder {
opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder {
opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::placeholder {
opacity: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
font-size: 1rem;
opacity: .5;
top: .6em;
line-height: 1;
color: #495057;
}
.input-group .has-float-label {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin-bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.input-group .has-float-label .form-control {
width: 100%;
border-radius: 0.25rem;
}
.input-group .has-float-label:not(:last-child), .input-group .has-float-label:not(:last-child) .form-control {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-right: 0;
}
.input-group .has-float-label:not(:first-child), .input-group .has-float-label:not(:first-child) .form-control {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
top: .6em;
}
如果您仔细查看此代码。 您会找到解决方案。 这意味着哪个不带占位符的输入不top:0.6em
focus
然后保持label
top:0.6em
。
但是select没有占位符。 所以你可以
.has-float-label.select-label label{
top:.9em;
}
.select-label select:focus + label{
top:-0.5em;
}
摆弄 。
您可以调整字体大小和间距。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.