フォームデザイン（フォーム部品選択フィルタ「:input」「:text」「:password」「:submit」「:image」「:reset」「:button」「:file」）

jQuery フォームデザイン

とりあえず全部の入力タグを扱うサンプル。
サンプル中ではコメントアウトしているけども、:input、:text、:password、:submit、:image、:reset、:button、:file を試せるようにしております。
尚、以下のサンプルを試す場合、input[type='image']については、適当に画像ファイルをダウンロードして、
名前をimage_button.gifにしてやってください。


で、いくつか気づいたことを。

:input

input[type="checkbox"]と、input[type="radio"]は効かない。

:submit

buttonタグも対象になってる。
imageが対象外になっている。

:button

input[type="button"]も対象になっている。

:file

他の入力タグに比べて分かりにくいけど一応反応しているっぽい。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function(){
        $(":input").focus(function() {
        //$(":text").focus(function() {
        //$(":password").focus(function() {
        //$(":submit").focus(function() {
        //$(":image").focus(function() {
        //$(":reset").focus(function() {
        //$(":button").focus(function() {
        //$(":file").focus(function() {
	  $(this).css("border", "medium solid red");
	}).blur(function() {
	  $(this).css("border", "");
	});
      })
    </script>
  </head>
  <body>
    <form>
      <input type="text" value="テキスト" /><br/>
      <input type="password" value="パスワード" /><br/>
      <input type="button" value="ボタン" /><br/>
      <input type="checkbox">チェックボックス</input><br/>
      <input type="radio">ラジオボタン</input><br/>
      <input type="submit" value="サブミットボタン" /><br/>
      <select>
	<option value="0"></option>
	<option value="1">値１</option>
	<option value="2">値２</option>
	<option value="3">値３</option>
      </select><br/>
      <textarea>テキストエリア</textarea><br/>
      <button>ボタンタグ</button><br/>
      <input type="image" src="image_button.gif" alt="イメージがあるつもり" /><br/>
      <input type="reset" value="リセットボタン" /><br/>
      <input type="file" name="file_name" /><br/>
    </form>
  </body>
</html>

しかしこの :* フィルタって・・・使うケースがあるんだろうか。