61

CSSセレクターを使用して、特定の値を持つ入力をターゲットにすることは可能ですか？

例：以下に基づいて以下の入力をターゲットにするにはどうすればよいですか？value="United States"

<input type="text" value="United States" />
4

9 に答える 9

61

動的な値（ああ、いや！D;）

npupが彼の回答で説明しているように、単純なcssルールは属性のみを対象としますvalue。これは、これがhtmlノードの実際の値をカバーしないことを意味します。

救助へのJavaScript！

元の回答

はい、それは非常に可能です。css属性セレクターを使用すると、次のような方法で入力を値で参照できます。

input[value="United States"] { color: #F90; }​

•jsFiddleの例

参照から

  • [att]属性の値に関係なく、要素が「att」属性を設定するときに一致します。

  • [att=val]要素の「att」属性値が正確に「val」の場合に一致します。

  • [att〜= val] att属性を持つ要素を表します。その値は、空白で区切られた単語のリストであり、そのうちの1つは正確に「val」です。「val」に空白が含まれている場合、それは何も表しません（単語がスペースで区切られているため）。「val」が空の文字列の場合、それは何も表しません。

  • [att | = val] att属性を持つ要素を表します。その値は、正確に「val」であるか、「val」で始まり、直後に「-」が続きます（U + 002D）。これは主に、BCP 47（[BCP47]）またはその後継で説明されているように、言語サブコードの一致（たとえば、HTMLの要素のhreflang属性）を許可することを目的としています。lang（またはxml：lang）言語サブコードのマッチングについては、：lang疑似クラスを参照してください。

于 2012-05-18T01:23:58.560 に答える
47

CSS疑似クラスと入力の検証属性をサポートするブラウザーを使用している場合は可能です。これにはIE9を除くほとんどの最新のブラウザーが含まれます。:validpattern

たとえば、正解が入力されたときに入力のテキストを黒から緑に変更するには、次のようにします。

input {
  color: black;
}
input:valid {
  color: green;
}
<p>Which country has fifty states?</p>

<input type="text" pattern="^United States$">

于 2015-04-13T18:43:48.783 に答える
18

はい。ただし、注意：属性セレクターは（もちろん）DOMノードのvalueプロパティ（elem.value）ではなく、要素の属性を対象としているため、フォームフィールドの更新中は更新されません。

それ以外の場合（多少の注意が必要ですが）、「プレースホルダー」属性/機能の代わりにCSSのみを使用するために使用できたと思います。多分それはOPが求めていたものですか？:)

于 2012-10-26T07:32:22.087 に答える
15

前に述べたように、ノードの保存された値にアクセスしないため、cssセレクター以上のものが必要です。したがって、javascriptが絶対に必要です。別の可能な解決策は次のとおりです。

<style>
input:not([value=""]){
border:2px solid red;
}
</style>

<input type="text" onkeyup="this.setAttribute('value', this.value);"/>
于 2014-01-09T22:09:14.903 に答える
7

確かに、試してみてください：

input[value="United States"]{ color: red; }

jsFiddleの例。

于 2012-05-18T01:24:29.387 に答える
4

Css3属性セレクターまたは属性値セレクターを使用できます。

/これにより、値が赤に定義されているすべての入力が作成されます/

input[value]{
color:red;
}

/入力値に応じて条件付き選択を行います/

input[value="United States"]{
color:red;
}

属性に値セレクターが含まれているような他の属性セレクターがあります、

input[value="United S"]{
color: red;
}

これにより、米国の状態を赤いテキストとして入力できます。

属性値がセレクターで始まるより

input[value^='united']{
color: red;
}

'united'で始まる入力テキストは、フォントの色が赤になります

そして最後のものは属性値がセレクターで終わることです

input[value$='States']{
color:red;
}

'States'で終わる入力値は、フォントの色が赤になります

于 2015-03-05T12:14:28.610 に答える
3

イベントの属性を更新することは、10分の1秒ごとに値をスキャンするよりも優れたアプローチです...

http://jsfiddle.net/yqdcsqzz/3/

inputElement.onchange = function()
{
    this.setAttribute('value', this.value);
};

inputElement.onkeyup = function()
{
    this.setAttribute('value', this.value);
};
于 2014-11-20T11:24:59.800 に答える
2

Chrome 72（2019-02-09）で、何らかの理由で、:in-range属性が空の入力に適用されていることを発見しました！date

したがって、これは私にとってはうまくいきます:(範囲が適用されている日付入力が壊れない:not([max]):not([min])ようにセレクターを追加しました：

input[type=date]:not([max]):not([min]):in-range {
    color: blue;
}

スクリーンショット：

ここに画像の説明を入力してください

実行可能なサンプルは次のとおりです。

window.addEventListener( 'DOMContentLoaded', onLoad );

function onLoad() {
    
    document.getElementById( 'date4' ).value = "2019-02-09";
    
    document.getElementById( 'date5' ).value = null;
    
}
label {
    display: block;
    margin: 1em;
}

input[type=date]:not([max]):not([min]):in-range {
    color: blue;
}
<label>
    <input type="date" id="date1" />
    Without HTML value=""
</label>
    
<label>
    <input type="date" id="date2" value="2019-02-09" />
    With HTML value=""
</label>

<label>
    <input type="date" id="date3" />
    Without HTML value="" but modified by user
</label>
    
<label>
    <input type="date" id="date4" />
    Without HTML value="" but set by script
</label>
    
<label>
    <input type="date" id="date5" value="2019-02-09" />
    With HTML value="" but cleared by script
</label>

于 2019-02-09T09:48:06.503 に答える
1

現在最も投票されている回答に続いて、データセット/データ属性を使用するとうまくいくことがわかりました。

//Javascript

const input1 = document.querySelector("#input1");
input1.value = "0.00";
input1.dataset.value = input1.value;
//dataset.value will set "data-value" on the input1 HTML element
//and will be used by CSS targetting the dataset attribute

document.querySelectorAll("input").forEach((input) => {
  input.addEventListener("input", function() {
    this.dataset.value = this.value;
    console.log(this);
  })
})
/*CSS*/

input[data-value="0.00"] {
  color: red;
}
<!--HTML-->

<div>
  <p>Input1 is programmatically set by JavaScript:</p>
  <label for="input1">Input 1:</label>
  <input id="input1" value="undefined" data-value="undefined">
</div>
<br>
<div>
  <p>Try typing 0.00 inside input2:</p>
  <label for="input2">Input 2:</label>
  <input id="input2" value="undefined" data-value="undefined">
</div>

于 2020-07-29T12:01:42.517 に答える