需要欄位時可以使用浮動標簽。當我從輸入標簽中洗掉所需的屬性時，它停止作業。
div{
margin-top:40px;
}
.btn-add input[type="text"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.btn-add input:focus ~ .floating-label,
.btn-add input:not(:focus):valid ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.btn-add-link input[type="url"]{
width: 90%;
padding: 10px 20px 0 20px;
border: none;
border-bottom:1px solid #999;
font-size: 140%;
color: #000;
}
.btn-add-link input:focus ~ .floating-label,
.btn-add-link input:not(:placeholder-shown)~.floating-label,
.btn-add-link input:not(:focus):valid ~ .floating-label{
top: -20px;
bottom: 10px;
left: 10px;
font-size: 20px;
opacity: 1;
color: rgb(100, 6, 6);
}
.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top:10px;
transition: 0.2s ease all;
color: #999999;
font-size: 120%;
}
.form-float{
position: relative;
}<div class="form-float btn-add">
<input type="text" class="inputText" >
<label class="floating-label">Button text</label> </div>我不想將此欄位作為必填欄位，我該如何修復它。我如何在不要求輸入的情況下完成浮動標簽的作業
uj5u.com熱心網友回復：
選擇器在獲得焦點時選擇輸入，如果它是有效輸入但未input:focus獲得焦點，則選擇器選擇它。input:not(:focus):valid由于您不希望必須填寫輸入欄位，因此您必須洗掉：
input:not(:focus):valid~.floating-label
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/449158.html
標籤：javascript html jQuery css
上一篇：使用jQuery評估這個元素標簽