我在表单上有以下用于浮动标签的 HTML/CSS（抱歉，如果它有点混乱）
* {
box-sizing: border-box;
}
html {
font: 14px/1.4 Sans-Serif;
}
form {
width: 320px;
float: left;
margin: 20px;
}
form>div {
position: relative;
overflow: hidden;
}
form input {
width: 100%;
border: 2px solid gray;
background: none;
position: relative;
top: 0;
left: 0;
z-index: 1;
padding: 8px 12px;
outline: 0;
margin: 4px 0 4px 0px
}
form input:valid+label {
top: -7%;
z-index: 100;
font-size: 70%;
padding: 1px 6px;
}
input:valid+label>div {
padding: 2px;
text-transform: uppercase;
}
form label {
transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
position: absolute;
color: #999;
padding: 7px 6px;
}
form.test-form input {
padding: 12px 12px 12px 12px;
}
form.test-form label {
top: 0;
bottom: 0;
left: 0;
width: 100%;
}
form.test-form input:focus+label {
top: -7%;
z-index: 100;
font-size: 70%;
padding: 1px 6px;
text-transform: uppercase;
}
.label {
background-color: white;
padding: 10px;
display: inline-block;
transition: padding 0.2s;
}
form.test-form input:focus+label>div {
padding: 2px;
}
<body>
<h1>Test Form</h1>
<form class="test-form">
<div>
<input id="name" name="name" type="text" required>
<label for="name">
<div class="label">
<span class="text">Your Name</span>
</div>
</label>
</div>
</form>
</body>
这正是我所需要的。唯一的问题是我无法选择输入框中的文本（如果您尝试一下，您会注意到“您的名字”在输入框中的实际文本之前突出显示）。
我假设这与我设置的方式有关z-index...有没有办法只编辑输入框中文本的 z-index？如果没有，是否有明显的解决方案来解决这个问题？
尝试这个：
* {
box-sizing: border-box;
}
html {
font: 14px/1.4 Sans-Serif;
}
form {
width: 320px;
float: left;
margin: 20px;
}
form>div {
position: relative;
}
form input {
width: 100%;
border: 2px solid gray;
background: none;
position: relative;
top: 0;
left: 0;
z-index: 1;
padding: 8px 12px;
outline: 0;
margin: 4px 0 4px 0px
}
form input:valid+label { /*<--Changed*/
top: -55px;
left:10px;
z-index: 100;
font-size: 70%;
padding: 1px 6px;
position:relative;
}
input:valid+label>div {
padding: 2px;
text-transform: uppercase;
}
form label {
transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
position: absolute;
color: #999;
padding: 7px 6px;
}
form.test-form input {
padding: 12px 12px 12px 12px;
}
form.test-form label {
top: 0;
bottom: 0;
left: 0;
width: 100%;
background:#FFF;
}
form.test-form input:focus+label { /*<--Changed*/
top:-55px;
left:10px;
font-size: 70%;
padding: 1px 6px;
text-transform: uppercase;
}
.label {
background-color: white;
padding: 10px;
display: inline-block;
transition: padding 0.2s;
}
form.test-form input:focus+label>div {
padding: 2px;
}
#name:focus { /*<--Added*/
z-index:1000;
}
#name:focus + label { /*<--Added*/
position:relative;
z-index:1001;
}
<body>
<h1>Test Form</h1>
<form class="test-form">
<div>
<input id="name" name="name" type="text" required>
<label for="name">
<div class="label">
<span class="text">Your Name</span>
</div>
</label>
</div>
</form>
</body>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
