web-dev-qa-db-ja.com

テキスト入力フィールド用のCSSセレクター

CSSセレクターを使用して 'text'タイプの入力フィールドをどのようにターゲットにできますか？

htmlcssformscss-selectorshtml-input
345
Yarin
input[type=text]

または、フォーム内のテキスト入力に制限する

form input[type=text]

または、myFormというIDを持つと仮定して、さらに特定の形式に制限する

#myForm input[type=text]

注意：これはIE6ではサポートされていないので、IE6用に開発したい場合は（Yi Jiangが提案したように）IE7.jsを使用するか、すべてのテキスト入力にクラスを追加します。

参照： http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

指定されているため /デフォルトの属性値は属性セレクタで常に選択できるとは限らないため、テキスト入力がレンダリングされるマークアップの他のケースをカバーしようとすることができます。

input:not([type]), // type attribute not present in markup
input[type=""], // type attribute present, but empty
input[type=text] // type is explicitly defined as 'text'

それでも、typeが定義されていても無効な値があり、type = "text"にフォールバックしている場合は、このままにします。それをカバーするために、他の既知のタイプではないすべての入力を選択します。

input:not([type=button]):not([type=password]):not([type=submit])...

しかし、このセレクタは非常にばかげているでしょうし、また 可能な型のリスト はHTMLに新しい機能が追加されて成長しています。

注意： :not擬似クラス は、IE9以降でのみサポートされています。

633
Alin Purcaru

ここで属性セレクターを使うことができます：

input[type="text"] {
    font-family: Arial, sans-serif;
}

これはIE 7以降でサポートされています。 IE6をサポートする必要がある場合は、 IE7.js を使用してこのサポートを追加できます。

参照してください： http://reference.sitepoint.com/css/attributeselector 詳細については/

37
Yi Jiang

私は通常私のメインスタイルシートでセレクタを使用してから、すべての入力タイプにクラスを追加するie6固有の.js（jquery）ファイルを作成します。例：

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

そして、クラスを使ってie6固有のスタイルシートに私のスタイルをコピーします。そうすれば、実際のマークアップは少しきれいになります。

14
garrettwinder

:textセレクタを使用して、テキスト型のすべての入力を選択できます。

Working Fiddle

$(document).ready(function () {
    $(":text").css({    //or $("input:text")
        'background': 'green',
        'color':'#fff'
    });
});

:textはjQueryの拡張機能であり、CSS仕様の一部ではありません。：textを使用するクエリでは、ネイティブのDOM querySelectorAll（）メソッドで提供されるパフォーマンスの向上を利用することはできません。最近のブラウザでパフォーマンスを向上させるには、代わりに[type="text"]を使用してください。これはIE6+に対して機能します。

$("[type=text]").css({  // or $("input[type=text]")
    'background': 'green',
    'color':'#fff'
});

_ css _ 

[type=text] // or input[type=text] 
{
    background: green;
}
6
Aamir Shahzad

テーブル行フィールドに入力タイプのテキストフィールドがありました。コードでターゲットにしています

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}
2
Amit Mhaske

@Amirが上に投稿したように、今日最良の方法 - クロスブラウザとIE6の後に - を使うことです

[type=text] {}

これまでのところ、CSSの特異性の低さ（ why ​​ _ isthatimportant ？）については誰も言及していません。[type=text]features 0,0 input[type=text]を持つ0,0,1,1の代わりに、1,0。

パフォーマンス面では、これ以上悪影響はありません。

リリースされたばかりのv4.0.0は、 セレクターの特異性が低くなった をリリースした。

0
Volker E.

属性セレクタを使ってCSSの入力型テキストをターゲットにします

input[type=text] {
background:gold;
font-size:15px;
 }
0
Santosh Khalse

入力[タイプ=テキスト]

これにより、Webページ内のすべての入力タイプのテキストが選択されます。

0
Navneet Kumar