“选择"的仅 CSS 浮动标签标签 [英] CSS-Only Floating Labels for "Select" Tags
本文介绍了“选择"的仅 CSS 浮动标签标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想应用浮动标签的原则，如下面的代码所示:
.form-control:focus + .form-control-placeholder,.form-control:valid + .form-control-placeholder {字体大小:75%；变换:translate3d(0, -100%, 0);不透明度:1；}选择"标签.截至目前，我已尝试合并以下 HTML:
和 CSS:
select:focus + #inputLab,选择:有效 + #inputLab {字体大小:75%；变换:translate3d(0, -100%, 0);不透明度:1；}没有成功.我将如何实现这一目标?谢谢.
解决方案
试试这个:
.floating-form {宽度:320px；}.浮动标签{位置:相对；底边距:20px；}.浮动输入，.浮动选择{字体大小:14px；填充:4px 4px；显示:块；宽度:100%；高度:30px；背景色:透明；边界:无；边框底部:1px 实心 #757575；}.浮动输入:焦点，.浮动选择:焦点{大纲:无；边框底部:2px 实心 #5264AE；}标签 {颜色:#999；字体大小:14px；字体粗细:正常；位置:绝对；指针事件:无；左:5px；顶部:5px；过渡:0.2s 全部缓解；-moz-transition: 0.2s 缓解一切；-webkit-transition:0.2s 轻松一切；}.floating-input:focus~label,.floating-input:not(:placeholder-shown)~label {顶部:-18px；字体大小:14px；颜色:#5264AE；}.floating-select:focus~label,.floating-select:not([value=""]):valid~label {顶部:-18px；字体大小:14px；颜色:#5264AE；}/* 活动状态 */.floating-input:focus~.bar:before,.floating-input:focus~.bar:after,.floating-select:focus~.bar:before,.floating-select:focus~.bar:after {宽度:50%；}*,*:前，*:后 {-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；}.floating-textarea {最小高度:30px；最大高度:260px；溢出:隐藏；溢出-x:隐藏；}/* 荧光笔 */.强调 {位置:绝对；高度:50%；宽度:100%；顶部:15%；左:0；指针事件:无；不透明度:0.5；}/* 活动状态 */.floating-input:focus~.highlight,.floating-select:focus~.highlight {-webkit-animation: inputHighlighter 0.3s 轻松；-moz-animation: inputHighlighter 0.3s 缓解；动画:inputHighlighter 0.3s 缓和；}/* 动画片 */@-webkit-keyframes inputHighlighter {从 {背景:#5264AE；}到 {宽度:0；背景:透明；}}@-moz-keyframes inputHighlighter {从 {背景:#5264AE；}到 {宽度:0；背景:透明；}}@keyframes inputHighlighter {从 {背景:#5264AE；}到 {宽度:0；背景:透明；}}<div class="floating-form"><div class="浮动标签"><input class="floating-input" type="text" placeholder=""><span class="highlight"></span><label>文本</label> <div class="浮动标签"><select class="floating-select" onclick="this.setAttribute('value', this.value);"值=""><option value=""></option><option value="1">阿拉巴马州</option><option value="2">波士顿</option><option value="3">Ohaio</option><option value="4">纽约</option><option value="5">华盛顿</option></选择><span class="highlight"></span><label>选择</label>
</center>
资料来源:https://codepen.io/dannibla/pen/amgRNR
I'd like to apply the principles of floating labels as demonstrated in the below code:
.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
font-size: 75%;
transform: translate3d(0, -100%, 0);
opacity: 1;
}
to 'select' tags. As of now, I have attempted to combine the following HTML:
<select id = "type" name = "type" class = "form-control" autocomplete = "off" required style = "margin-top: 20px;">
<option selected disabled hidden id = "inputLab">Option</option>
<option value = "1">1</option>
<option value = "2">2</option>
</select>
and CSS:
select:focus + #inputLab,
select:valid + #inputLab {
font-size: 75%;
transform: translate3d(0, -100%, 0);
opacity: 1;
}
with no success. How would I go about accomplishing this? Thanks.
解决方案
Try this:
.floating-form {
width: 320px;
}
.floating-label {
position: relative;
margin-bottom: 20px;
}
.floating-input,
.floating-select {
font-size: 14px;
padding: 4px 4px;
display: block;
width: 100%;
height: 30px;
background-color: transparent;
border: none;
border-bottom: 1px solid #757575;
}
.floating-input:focus,
.floating-select:focus {
outline: none;
border-bottom: 2px solid #5264AE;
}
label {
color: #999;
font-size: 14px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 5px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.floating-input:focus~label,
.floating-input:not(:placeholder-shown)~label {
top: -18px;
font-size: 14px;
color: #5264AE;
}
.floating-select:focus~label,
.floating-select:not([value=""]):valid~label {
top: -18px;
font-size: 14px;
color: #5264AE;
}
/* active state */
.floating-input:focus~.bar:before,
.floating-input:focus~.bar:after,
.floating-select:focus~.bar:before,
.floating-select:focus~.bar:after {
width: 50%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.floating-textarea {
min-height: 30px;
max-height: 260px;
overflow: hidden;
overflow-x: hidden;
}
/* highlighter */
.highlight {
position: absolute;
height: 50%;
width: 100%;
top: 15%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active state */
.floating-input:focus~.highlight,
.floating-select:focus~.highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* animation */
@-webkit-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
@-moz-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
@keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
<center>
<div class="floating-form">
<div class="floating-label">
<input class="floating-input" type="text" placeholder=" ">
<span class="highlight"></span>
<label>Text</label>
</div>
<div class="floating-label">
<select class="floating-select" onclick="this.setAttribute('value', this.value);" value="">
<option value=""></option>
<option value="1">Alabama</option>
<option value="2">Boston</option>
<option value="3">Ohaio</option>
<option value="4">New York</option>
<option value="5">Washington</option>
</select>
<span class="highlight"></span>
<label>Select</label>
</div>
</div>
</center>
Source: https://codepen.io/dannibla/pen/amgRNR
这篇关于“选择"的仅 CSS 浮动标签标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
