浮動標籤底部工作，但頂部不

所以我做了一個浮動標籤的形式，但問題是，當我把標籤放在上面它不會出現，但如果它在底部出現。我不知道問題到底在哪裏。浮動標籤底部工作，但頂部不

這是我的代碼，我做了兩種形式來向你展示兩個標籤之間的區別。
請檢查並確定我的問題:)謝謝！

.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>

來源

2016-09-13 user2522053

的+ CSS選擇器只能在相鄰的元素，因爲你的選擇是.field + .label，和你在field-container2的label先於input，它不會根據該CSS規則選擇。

來源

2016-09-13 23:41:04

我按照你說的方式改變了代碼，但它仍然沒有改變一件事。它沒有出現。 – user2522053

@ user2522053我認爲你誤解了我的答案 - 我的意思是，當標籤位於輸入上方時，你使用的'+'選擇器將不起作用，這就是爲什麼你有這個問題。 –

@ user2522053沒有JavaScript，如果在輸入下方沒有標籤，您將無法完成所需內容。大多數CSS框架目前都在底部有標籤，這樣他們就可以使用'input：focus + label'，然後只要他們認爲合適就轉換標籤 –

浮動標籤底部工作，但頂部不

回答

相關問題