焦點上的這兩件事情，是JS需要的？

Question

我無法弄清楚如何在使用焦點的輸入上獲得這兩種效果（請參閱下面的代碼片段）。我注意到焦點只適用於這個第一行的元素。有人能告訴我爲什麼嗎？是否可以在不使用JavaScript的情況下獲得兩種效果？

form { 
 
    margin: 30px; 
 
    font-family: Arial; 
 
} 
 

 
.expand { 
 
    display: block; 
 
    position: relative; 
 
    margin-top: 20px; 
 
    width: 300px; 
 
} 
 

 
input[type="text"], 
 
input[type="email"] { 
 
    border: none; 
 
    background-color: #eee; 
 
    padding: 10px; 
 
    width: 280px; 
 
} 
 

 
.border { 
 
    position: absolute; 
 
    display: block; 
 
    height: 3px; 
 
    width: 100%; 
 
    top: 100%; 
 
    background: red; 
 
    transform: scaleX(0); 
 
    transition: transform 0.5s; 
 
    transform-origin: 0 50%; 
 
} 
 

 
label { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    transform: translateY(-50%); 
 
    color: #999; 
 
    pointer-events: none; 
 
    transition: 0.2s; 
 
    margin-left: 10px; 
 
} 
 

 
input[type="text"]:focus + .border, 
 
input[type="email"]:focus + .border { 
 
    transform: scaleX(1); 
 
} 
 

 
input[type="text"]:focus + label, 
 
input[type="email"]:focus + label { 
 
    top: -10px; 
 
    font-size: 12px; 
 
    color: red; 
 
    font-weight: bold; 
 
    margin: 0; 
 
}

<form action=""> 
 
    <div class="expand"> 
 
    <input type="text" name="" id=""> 
 
    <!-- border before label --> 
 
    <div class="border"></div> 
 
    <label for="">Here works border effect</label> 
 
    </div> 
 
    
 
    <div class="expand"> 
 
    <input type="email" name="" id=""> 
 
    <!-- border after label --> 
 
    <label for="">Here works label effect</label> 
 
    <div class="border"></div> 
 
    </div> 
 
</form>

Answer 1

如果使用+選擇只有直接兄弟會受到影響，轉而使用~

form { 
 
    margin: 30px; 
 
    font-family: Arial; 
 
} 
 

 
.expand { 
 
    display: block; 
 
    position: relative; 
 
    margin-top: 20px; 
 
    width: 300px; 
 
} 
 

 
input[type="text"], 
 
input[type="email"], 
 
textarea { 
 
    border: none; 
 
    background-color: #eee; 
 
    padding: 10px; 
 
    width: 280px; 
 
} 
 

 
textarea { 
 
    resize: none; 
 
    margin-bottom: -1px; 
 
} 
 

 
.border { 
 
    position: absolute; 
 
    display: block; 
 
    height: 3px; 
 
    width: 100%; 
 
    top: 100%; 
 
    background: red; 
 
    transform: scaleX(0); 
 
    transition: transform 0.5s; 
 
    transform-origin: 0 50%; 
 
} 
 

 
label { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    transform: translateY(-50%); 
 
    color: #999; 
 
    pointer-events: none; 
 
    transition: 0.2s; 
 
    margin-left: 10px; 
 
} 
 

 
input[type="text"]:focus ~ .border, 
 
input[type="email"]:focus ~ .border, 
 
textarea:focus ~ .border { 
 
    transform: scaleX(1); 
 
} 
 

 
input[type="text"]:focus ~ label, 
 
input[type="email"]:focus ~ label, 
 
textarea:focus ~ label { 
 
    top: -10px; 
 
    font-size: 12px; 
 
    color: red; 
 
    font-weight: bold; 
 
    margin: 0; 
 
}

<form action=""> 
 
    <div class="expand"> 
 
    <input type="text" name="" id=""> 
 
    <!-- border before label --> 
 
    <div class="border"></div> 
 
    <label for="">Here works border effect</label> 
 
    </div> 
 
    
 
    <div class="expand"> 
 
    <input type="email" name="" id=""> 
 
    <!-- border after label --> 
 
    <label for="">Here works label effect</label> 
 
    <div class="border"></div> 
 
    </div> 
 
</form>

Answer 2

他re小提琴：https://jsfiddle.net/3nw7mkfe/1/

您可以連接選擇器+像>或〜或其他。

<form action=""> 
    <div class="expand"> 
    <input type="email" name="" id=""> 
    <!-- border after label --> 
    <label for="">Here works label effect</label> 
    <div class="border"></div> 
    </div> 
</form> 

form { 
    margin: 30px; 
    font-family: Arial; 
} 

.expand { 
    display: block; 
    position: relative; 
    margin-top: 20px; 
    width: 300px; 
} 

input[type="text"], 
input[type="email"], 
textarea { 
    border: none; 
    background-color: #eee; 
    padding: 10px; 
    width: 280px; 
} 

textarea { 
    resize: none; 
    margin-bottom: -1px; 
} 

.border { 
    position: absolute; 
    display: block; 
    height: 3px; 
    width: 100%; 
    top: 100%; 
    background: red; 
    transform: scaleX(0); 
    transition: transform 0.5s; 
    transform-origin: 0 50%; 
} 

label { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    transform: translateY(-50%); 
    color: #999; 
    pointer-events: none; 
    transition: 0.2s; 
    margin-left: 10px; 
} 

input[type="text"]:focus + label + .border, 
input[type="email"]:focus + label + .border, 
textarea:focus + .border { 
    transform: scaleX(1); 
} 

input[type="text"]:focus + label, 
input[type="email"]:focus + label, 
textarea:focus + label { 
    top: -10px; 
    font-size: 12px; 
    color: red; 
    font-weight: bold; 
    margin: 0; 
} 

Answer 3

你的有效選擇是input:focus + .border和input:focus + label（有兩種類型的輸入，但是這不要緊，工作）。 + selector只選擇相鄰的兄弟姐妹。如果您想使其獨立於標籤和邊框的順序工作，則應使用general sibling selector ~。這將選擇所選元素之後的任何兄弟，而不僅僅是相鄰的元素。

因此，您的選擇器將變爲input:focus ~ .border和input:focus ~ label。希望有所幫助。

選擇器和組合器的概述見MDN。有一些非常強大的！

Answer 4

這會爲你做它需要什麼

form { 
 
    margin: 30px; 
 
    font-family: Arial; 
 
} 
 
.expand { 
 
    display: block; 
 
    position: relative; 
 
    margin-top: 20px; 
 
    width: 300px; 
 
} 
 
input[type="text"], 
 
input[type="email"], 
 
textarea { 
 
    border: none; 
 
    background-color: #eee; 
 
    padding: 10px; 
 
    width: 280px; 
 
} 
 

 
textarea { 
 
    resize: none; 
 
    margin-bottom: -1px; 
 
} 
 

 
.border { 
 
    position: absolute; 
 
    display: block; 
 
    height: 3px; 
 
    width: 100%; 
 
    top: 100%; 
 
    background: red; 
 
    transform: scaleX(0); 
 
    transition: transform 0.5s; 
 
    transform-origin: 0 50%; 
 
} 
 

 
label { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    transform: translateY(-50%); 
 
    color: #999; 
 
    pointer-events: none; 
 
    transition: 0.2s; 
 
    margin-left: 10px; 
 
} 
 

 
input[type="text"]:focus + label + .border, 
 
input[type="email"]:focus + label + .border, 
 
textarea:focus + .border { 
 
    transform: scaleX(1); 
 
} 
 

 
input[type="text"]:focus + label, 
 
input[type="email"]:focus + label, 
 
textarea:focus + label { 
 
    top: -10px; 
 
    font-size: 12px; 
 
    color: red; 
 
    font-weight: bold; 
 
    margin: 0; 
 
}

<form action=""> 
 
    <div class="expand"> 
 
    <input type="email" name="" id=""> 
 
    <!-- border after label --> 
 
    <label for="">Here works label effect</label> 
 
    <div class="border"></div> 
 
    
 
    </div> 
 
    <div class="expand"> 
 
    <input type="email" name="" id=""> 
 
    <!-- border after label --> 
 
    <label for="">Here works label effect</label> 
 
    <div class="border"></div> 
 
    </div> 
 
</form>

檢查這一點，將工作，因爲你需要