2010年7月2日金曜日

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>


こんな感じになります。




checkbox




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

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

0 件のコメント:

コメントを投稿