<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.