inputのpattern指定による赤枠を解除する方法

html5になってからformタグが強化されていますね。

例えばクレジットカード番号などの入力を制限するときにpattern属性を指定することで入力パターンを検証してくれるようになります。

実際の入力値がこのパターンに従わない場合、ブラウザの機能として赤枠で表示されるようですが、これを消すにはbox-shadowを指定するといいようです。

<input id="card_number_field" name="card_number" placeholder="1234 5678 0912 3456" type="text" maxlength="19" pattern="[0-9]*" size="19" style="box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;">