Adding the :focus pseudo-class in a select element and <input> elements with type="file&q-CodePudding

As a beginner I found this really helpful and I still want to learn more. Can you help me with some tutorial on how to apply Adding the :focus pseudo-class in a select element change somehow the border-bottom color after choosing an option to its dropdown? I mean :focus work and visible while selecting but how about leaving it with a content? Thanks!

@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 >
    <div >
      <label>Student ID</label>
      <input type="text" placeholder="Enter your ID" required>
    </div>

    <div >
      <label>Section</label>
      <input type="text" placeholder="Enter your section" 
      required>
    </div>
    
    <div >
      <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>

CodePudding user response：

Add the selector .input-field select:valid to target the select element too.

.input-field input:is(:focus, :valid),
.input-field select:valid
{
  border-bottom-color: #4070f4;
}

CodePudding user response：

You can create a separate class for the select element, then you can add a psudeo class or something else

@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 >
    <div >
      <label>Student ID</label>
      <input type="text" placeholder="Enter your ID" required>
    </div>

    <div >
      <label>Section</label>
      <input type="text" placeholder="Enter your section" 
      required>
    </div>
    
    <div >
      <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>