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

CSSセレクターを使用して、「テキスト」タイプの入力フィールドをどのようにターゲティングできますか？

input[type=text]

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

form input[type=text]

または、特定のフォームにさらに制限するには、IDがあると仮定します myForm

#myForm input[type=text]

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

リファレンス：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 = "text"にフォールバックします。それをカバーするために、他の既知のタイプのいずれでもないすべての入力を選択することができます

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

しかし、このセレクターはかなり馬鹿げているでしょう。また、可能な機能のリストは、HTMLに追加される新機能に伴って増加しています。

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

ここで属性セレクターを使用できます。

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

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

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

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

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

そして、クラスを使用して、ie6固有のスタイルシートで私のスタイルを複製します。そうすれば、実際のマークアップが少しクリーンになります。

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

作業フィドル

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

:textjQuery拡張であり、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;
}

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

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

@Amirが上記に投稿したように、今日の最良の方法-クロスブラウザーでIE6を残す-は

[type=text] {}

誰も（下のCSSの特異性を言及していない理由 である こと が重要？）これまでのところ、[type=text] 特徴 0,0,1,0の代わりに、0,0,1,1とinput[type=text]。

パフォーマンスに関しては、これ以上悪影響はありません。

セレクターの特異性を下げてリリースされたv4.0.0を正規化します。

属性セレクターを使用して、CSSで入力タイプのテキストをターゲットにします

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

input [type = text]

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

属性セレクターは、入力によく使用されます。これは属性セレクターのリストです：

[title] title属性を持つすべての要素が選択されます。

[title = banana] title属性の「banana」値を持つすべての要素。

[title〜= banana] title属性の値に「banana」を含むすべての要素。

[title | = banana] title属性の値が「banana」で始まるすべての要素。

[title ^ = banana] title属性の値が「banana」で始まるすべての要素。

[title $ = banana] title属性の値が「banana」で終わるすべての要素。

[title * = banana] title属性の値がサブストリング「banana」を含むすべての要素。

リファレンス：https : //kolosek.com/css-selectors/