폼의 플로트 레이블에 대해 다음 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>이것은 내가 필요한 방식으로 정확히 작동합니다. 유일한 문제는 입력 상자의 텍스트를 입력 한 후에 선택할 수 없다는 것입니다 (입력 상자의 실제 텍스트가 표시되기 전에 "YOUR NAME"이 강조 표시됨을 알 수 있습니다).
나는 이것이 내가 설정하는 방식과 관련이 있다고 가정하고 있습니다 z-index... 입력 상자의 텍스트에 대해서만 Z- 색인을 편집하는 방법이 있습니까? 그렇지 않은 경우이 문제를 해결할 수있는 확실한 해결책이 있습니까?
이 시도:
* {
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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다