textセレクター

セレクター:textは、タイプがtextのinput要素を選択します。タグinputを参照してください。 :textはCSS仕様には属さないため、現代のブラウザーではパフォーマンス向上のために、代わりに[type='text']を使用することをお勧めします。

構文

タイプがtextのinput要素を選択するには、以下のようにします：

javascript$(':text');

他の疑似クラスセレクター（':'で始まるもの）と同様に、':'の前にタグ名や他のセレクターを指定することをお勧めします。そうしないと、セレクター'*'が適用され、$(':text')は$('*:text')として解釈されてしまいます。そのため、$('input:text')を使用する方が良いでしょう。 :textは、type属性が指定されていないinput要素も選択することに注意してください。動作の違いは以下の例で確認できます：

javascript$('<input>').is('[type=text]'); // falseを返します
$('<input>').is(':text'); // trueを返します

例

タイプがtextのすべてのinput要素を選択し、メソッドcssを使用して緑の背景と赤い枠線を適用してみましょう：

html<form>
  <input type="button" value="button">
  <input type="file">
  <input type="checkbox">
  <button>button</button>
  <input type="reset">
  <input type="radio" name="test">
  <input type="radio" name="test">
  <input type="checkbox">
  <input type="text">
</form>

javascript$('form input:text').css({background: 'green', border: '2px red solid'});

$('form').submit(function(event) {
  event.preventDefault(); // フォーム送信を防止します
});

関連項目