<form>
  <div>
    <div>お名前</div>
    <input type="text" required/>
    <!--<div>お名前は必須項目です</div> -->
  </div>
  
  <div>
    <div>メールアドレス</div>
    <input type="email" required/>
    <!--<div>会社名は必須項目です</div> -->
    <!--<div>メールアドレスを入力してください</div> -->
  </div>
  
  <div>
    <div>会社名</div>
    <input type="text" required/>
    <!--<div>会社名は必須項目です</div> -->
  </div>
  
  <div>
    <div>電話番号</div>
    <input type="tel"/>
  </div>
  
  <div>
    <div>制作のご依頼内容</div>
    <div>
      <label>
        <input type="radio" name="request" required/>
        新規製作のご依頼
      </label>
    </div>
    <div>
      <label>
        <input type="radio" name="request" required/>
        改修 / 運用 / 保守のご依頼
      </label>
    </div>
    <div>
      <label>
        <input type="radio" name="request" required/>
        まず相談してみたい
      </label>
    </div>
    <!--<div>ご依頼内容は必須項目です</div> -->
  </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;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.