フォーム部品を選択するフィルター :input

ヒダカ

2009年11月05日 18:00

ASCII.jp:jQueryによるフォームのデザインの基礎(後編)|Web制作の現場で使えるjQuery UIデザイン入門

上記リンクを参考に実際に書いてみた。

:inputフィルターはフォームの部品を一括して指定するフィルター。

input、textarea、select要素にwidth:180px、margin-bottom:10pxを設定しました。


$(function(){$("#input :input").css("width","180px").css("marginBottom","10px");})

テキストエリア
選択1選択1選択1選択1選択1

コードは以下の通り。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#input :input").css("width","180px").css("marginBottom","10px");
})
</script>

<div id="input">
<form>
<input type="text" value="テキストフィールド" /><br />
<textarea>テキストエリア</textarea><br />
<select>
<option>選択1</option>
<option>選択1</option>
<option>選択1</option>
<option>選択1</option>
<option>選択1</option>
</select><br />
<input type="button" value="汎用ボタン"/><br />
<input type="submit"value="送信ボタン"/>
</form>
</div>

関連記事