我有一个span作为输入字段的标签。选中时,标签位于输入字段上方。
我的问题是,当你尝试点击输入字段时,标签就在输入字段的前面,阻止你选择它。
我尝试用z索引来修复它,但这似乎不起作用。
有人能帮我得到跨度前面的输入字段吗?
null
#input {
color: #686868;
vertical-align: middle;
padding: 0px !important;
font-size: 16px;
border-width: 0;
overflow: visible;
box-shadow: none;
border: none;
border-bottom: 1px solid #d5dce3;
background-color: transparent !important;
}
#input:focus {
border-color: #1F76BC;
}
#label {
color: rgba(0,0,0,.99);
transition-timing-function: cubic-bezier(.075,.82,.165,1);
transition-duration: .5s;
position: absolute;
width: 100%;
text-align: left;
font-size: 16px;
bottom: 6px;
color: #8792a1;
}
.container:focus-within #label {
transform: translate3d(0,-26px,0);
color: rgba(0,0,0,.99);
}
.container {
position: relative;
margin-top: 32px;
}
<div class="container">
<span id="label">Provincie</span>
<input type="text" id="input" value="" size="40">
</div>
null
使用label
而不是span
,无论占位符的位置如何,您的输入
都可以很好地单击
null
#input {
color: #686868;
vertical-align: middle;
padding: 0px !important;
font-size: 16px;
border-width: 0;
overflow: visible;
box-shadow: none;
border: none;
border-bottom: 1px solid #d5dce3;
background-color: transparent !important;
}
#input:focus {
border-color: #1F76BC;
}
label {
color: rgba(0,0,0,.99);
transition-timing-function: cubic-bezier(.075,.82,.165,1);
transition-duration: .5s;
position: absolute;
width: 100%;
text-align: left;
font-size: 16px;
bottom: 6px;
color: #8792a1;
}
.container:focus-within label {
transform: translate3d(0,-26px,0);
color: rgba(0,0,0,.99);
}
.container {
position: relative;
margin-top: 32px;
}
<div class="container">
<label for="input">Provincie</label>
<input type="text" id="input" value="" size="40">
</div>
像这样的东西??
null
#input {
color: #686868;
vertical-align: middle;
padding: 0px !important;
font-size: 16px;
border-width: 0;
overflow: visible;
box-shadow: none;
border: none;
border-bottom: 1px solid #d5dce3;
background-color: transparent !important;
}
#input:focus {
border-color: #1F76BC;
}
#label {
color: rgba(0, 0, 0, .99);
transition-timing-function: cubic-bezier(.075, .82, .165, 1);
transition-duration: .5s;
position: absolute;
width: 100%;
text-align: left;
font-size: 16px;
bottom: 6px;
color: #8792a1;
}
.container:focus-within #label {
transform: translate3d(0, -26px, 0);
color: rgba(0, 0, 0, .99);
}
.container {
position: relative;
margin-top: 32px;
}
<div class="container">
<input type="text" id="input" value="" size="40" placeholder="Provincie">
</div>
请添加此样式。
#input{
position:relative;
z-index:999;
}
null
#input {
color: #686868;
vertical-align: middle;
padding: 0px !important;
font-size: 16px;
border-width: 0;
overflow: visible;
box-shadow: none;
border: none;
border-bottom: 1px solid #d5dce3;
background-color: transparent !important;
position:relative;
z-index:999;
}
#input:focus {
border-color: #1F76BC;
}
#label {
color: rgba(0,0,0,.99);
transition-timing-function: cubic-bezier(.075,.82,.165,1);
transition-duration: .5s;
position: absolute;
width: 100%;
text-align: left;
font-size: 16px;
bottom: 6px;
color: #8792a1;
}
.container:focus-within #label {
transform: translate3d(0,-26px,0);
color: rgba(0,0,0,.99);
}
.container {
position: relative;
margin-top: 32px;
}
<div class="container">
<span id="label">Provincie</span>
<input type="text" id="input" value="" size="40">
</div>