0

I'm trying to customize the style of the login form, but I can't apply the :focus rule. Could someone be so kind as to explain to me why it's not working? I don't understand what I'm doing wrong, sorry, but I'm new to all this.

/*Label Style*/
.login_form_fields input:focus + label {
   color: blue;
}

/*Input Style*/
.login_form_fields input {
   border-radius: 2px;
   background: #fff;
   border: 1px solid #E3E3E3;
}

.login_form_fields input:focus {
   border: 1px solid blue;
}
<form id="login-form" method="post">
      <div class="login_form_fields uname">
         <label for="username">Username o Email:</label>
         <input type="text" id="username" name="username" required>
      </div>
      <div class="login_form_fields pswrd">
         <label for="password">Password:</label>
         <input type="password" id="password" name="password" required>
      </div>   
      <button class="login_button" type="submit">Accedi</button>
   </form>
</div>
GorillaDev
  • 43
  • 5
  • Unfortunately, I believe you can't use `:focus` on a div, more information here: https://stackoverflow.com/questions/30832383/div-focus-using-css – Daniel R Feb 04 '23 at 01:34
  • Your adjacent sibling combinator which is `input:focus + label` is not correct. The `+` means any element immediately after the former selector. Here the `label` selector comes before the `input:focus`, that's why it's not working. You need to use JS to change the label color when the input is focused. – h_a Feb 04 '23 at 02:01

0 Answers0