作為一個初學者，我發現這真的很有幫助，我仍然想了解更多。你能幫我一些關于如何應用添加 : focus偽類的教程嗎？我的意思是在選擇時作業和可見，但是留下內容怎么樣？謝謝！select element:focus
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
font-family: 'Poppins', sans-serif;
}
form .fields .input-field {
display: flex;
flex-direction: column;
}
.input-field input, select{
outline: none;
font-size: 14px;
font-weight: 400;
color: #333;
border: none;
outline: none;
padding: 0 15px;
border-bottom: 2px solid #ccc;
border-top: 2px solid transparent;
height: 42px;
margin: 8px 0;
}
.input-field input:is(:focus, :valid){
border-bottom-color: #4070f4;
}<form action="">
<div class="fields">
<div class="input-field">
<label>Student ID</label>
<input type="text" placeholder="Enter your ID" required>
</div>
<div class="input-field">
<label>Section</label>
<input type="text" placeholder="Enter your section"
required>
</div>
<div class="input-field">
<label>Department</label>
<select required>
<option value="" disabled selected>Select department
</option>
<option value="jhs">JHS Department</option>
<option value="shs">SHS Department</option>
<option value="college">College/TED Department</option>
</select>
</div>
</div>
</form>uj5u.com熱心網友回復：
添加選擇器.input-field select:valid以定位選擇元素。
.input-field input:is(:focus, :valid),
.input-field select:valid
{
border-bottom-color: #4070f4;
}
uj5u.com熱心網友回復：
您可以為選擇元素創建一個單獨的類，然后您可以添加一個偽類或其他東西
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
font-family: 'Poppins', sans-serif;
}
form .fields .input-field {
display: flex;
flex-direction: column;
}
.input-field input, select{
outline: none;
font-size: 14px;
font-weight: 400;
color: #333;
border: none;
outline: none;
padding: 0 15px;
border-bottom: 2px solid #ccc;
border-top: 2px solid transparent;
height: 42px;
margin: 8px 0;
}
.input-field input:is(:focus, :valid){
border-bottom-color: aqua;
}
.select:focus{
border-bottom-color: aqua;
}
.select:valid{
border-bottom-color: salmon;
}<form action="">
<div class="fields">
<div class="input-field">
<label>Student ID</label>
<input type="text" placeholder="Enter your ID" required>
</div>
<div class="input-field">
<label>Section</label>
<input type="text" placeholder="Enter your section"
required>
</div>
<div class="input-field">
<label>Department</label>
<select required class="select">
<option value="" disabled selected>Select department
</option>
<option value="jhs">JHS Department</option>
<option value="shs">SHS Department</option>
<option value="college">College/TED Department</option>
</select>
</div>
</div>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/505406.html