CSS在輸入字段上更改了焦點屬性

我試圖在輸入焦點時影響標籤。無論出於什麼原因，只要輸入被聚焦，css都不會被識別爲標籤。CSS在輸入字段上更改了焦點屬性

li.sm-vol label { 
    position: absolute; 
    top: 33px; 
    width: 100%; 
    background: #462770; 
    color: #fff; 
    font-weight: 400 !important; 
    padding-left: 10px; 
    transition: all 0.2s ease; 
} 

li.sm-vol input:focus li.sm-vol label { 
    top: 15px; 
}

來源

2016-06-09 rthames62

你能添加HTML作爲參考？這將有助於理解代碼及其行爲。 – Buffalo

http://meta.stackexchange.com/q/5234 – Stickers

你可以做純CSS只有當標籤是使用+或~選擇旁邊的輸入字段，即

input:focus + label { 
 
    color: red; 
 
}

<input type="text"> 
 
<label>Label</label>

對於視覺上重新排序輸入和標籤位置，請參閱flexbox的簡單演示。

.fieldset { 
 
    display: inline-flex; 
 
} 
 
.fieldset label { 
 
    order: -1; 
 
    margin-right: 4px; 
 
} 
 
.fieldset input:focus + label { 
 
    color: red; 
 
}

<div class="fieldset"> 
 
    <input type="text"> 
 
    <label>Label</label> 
 
</div>

來源

2016-06-09 15:03:07 Stickers

CSS在輸入字段上更改了焦點屬性

回答

相關問題