1
フォームのフローティングラベルを作成しましたが、ラベルを上にすると表示されませんが下にある場合は表示されます。私はどこに問題があるのか正確にはわかりません。下のフローティングラベルが上にならないのですが、
ここに私のコードですが、私はあなたに2つのラベルの違いを示すために2つのフォームを作成しました。
確認して問題を特定してください:)ありがとうございます！
.forms {
width: 50%;
padding: 50px;
}
.field-container {
position: relative;
line-height: 25px;
}
.field {
display: block;
width: 100%;
padding: 5px 0;
border: none;
font-size: 14px;
border-bottom: 1px solid #c5c5c5;
margin: -5px 0;
}
.field input {
color: blue;
}
.field:focus {
outline: 0;
color: #2580cd;
}
.floating-label {
display: block;
pointer-events: none;
font-size: 10px;
opacity: 0;
background-color: white;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.field:valid + .floating-label {
opacity: 1;
margin-top: -12px;
color: #9e9e9e;
}
.field:focus + .floating-label {
color: #2580cd;
}
.field:focus {
border-bottom: 1px solid #2580cd;
}
/* THE OTHER ONE */
.field-container2 {
position: relative;
line-height: 25px;
}
.field2 {
width: 100%;
padding: 5px 0;
border: none;
font-size: 14px;
border-bottom: 1px solid #c5c5c5;
margin: -5px 0;
}
.field2:focus {
outline: 0;
color: #2580cd;
}
.floating-label2 {
display: block;
pointer-events: none;
font-size: 10px;
opacity: 0;
background-color: white;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.field2:valid + .floating-label2 {
opacity: 1;
color: #9e9e9e;
}
.field2:focus + .floating-label2 {
color: #2580cd;
}
.field2:focus {
border-bottom: 1px solid #2580cd;
}<div class="forms">
<form class="field-container">
<input type="text" class="field" required placeholder="Label 1" />
<label class="floating-label">Label 1</label>
</form>
<form class="field-container2">
<label class="floating-label2">Label 2</label>
<input type="text" class="field2" required placeholder="Label 2" />
</form>
</div>
コードを変更しましたが、それでも変わっていません。現れません。 – user2522053
@ user2522053私はあなたが私の答えを誤って読んだと思う - あなたが使用している '+'セレクタは、ラベルが入力の上にあるときには動作しないということです。 –
@ user2522053 JavaScriptなしでは、入力の下にラベルを付けることなく、目的を達成することはできません。ほとんどのCSSフレームワークは、現在、 'input：focus + label'を使用できるようにラベルを下にしています。 –