cssのoutlineプロパティでフォーム要素のアウトラインを指定する

cssのoutlineプロパティを使うと、フォームの各要素をデコレーションできます。


<style type="text/css">
input:focus, select:focus, checkbox:focus {　outline: 5px #0000ff dotted;　}
</style>

<form name="test" id="outlineTest">
<input type="text" name="t1" value=""><br>
<select name="t2"><option value="1">select1</option><option value="2">select2</option><option value="3">select3</option></select><br>
<input type="checkbox" name="t3" value="1">checkbox
</form>


こんな感じになります。

select1select2select3

checkbox

cssのみで手軽に実装できるので便利です。

参考：http://www.tagindex.com/stylesheet/form/outline.html