Newsletter Sign Up with Success Message

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  Nice one

  If you are cerious there is also a CSS property that we can use to check wether the input is in valid or invalid state and here is how it works

  /* Style for invalid input fields */
  input:invalid {
      border: 2px solid red;  /* Red border for invalid input */
      background-color: #ffe6e6;  /* Light red background */
      color: #a94442;  /* Darker red text */
  }
  
  input:invalid:focus {
      outline: none;
      box-shadow: 0 0 5px red;  /* Red shadow when focused */
  }
  
  textarea:invalid, select:invalid {
      border: 2px solid red;
      background-color: #ffe6e6;
      color: #a94442;
  }
  

  Explanation:

  • input:invalid: This targets any <input> element that is invalid according to its validation rules (e.g., type="email" without a valid email format).

  • background-color and border: Provide visual feedback with a red border and a light red background.

  • input:invalid:focus: Adds a red shadow when the invalid input is focused, making it stand out.

  Marked as helpful

  1