405

CSS セレクターを使用して「テキスト」タイプの入力フィールドをターゲットにするにはどうすればよいですか?

4

9 に答える 9

721 
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 以降でのみサポートされています。

于 2010-11-06T16:30:12.933 に答える
45

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

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

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

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

于 2010-11-06T16:30:17.990 に答える
13

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

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

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

于 2010-11-06T19:26:24.003 に答える
2

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

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}
于 2016-05-24T06:57:28.513 に答える