<form>
  <div>
    URL
    <input type="url"/>
  </div>
  <div>
    Email
    <input type="email"/>
  </div>
  
  <div>
    Password
    <input type="password"/>
  </div>
  
  <div>
    数値
    <input type="number"/>
  </div>
  
  <div>
    電話番号
    <input type="tel"/>
  </div>
  
  <button type="submit">送信</button>
</form>
input,
select {
  &:valid {
    border: 1px solid green;
  }
  &:invalid {
    border: 1px solid red;
  }
}

// 案件上デフォルトのstyleで使われることがほぼないのでstyleは適当
[type='radio'],
[type='checkbox'] {
  &:valid {
    box-shadow: green 0px 0px 3px 1px;
  }
  &:invalid {
    box-shadow: red 0px 0px 3px 1px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.