1

フォーム選択オプション ラベルのテキストの一部を別の色にして、目立つようにする必要があります。たとえば、 があるものはすべて赤である()必要があります。これはリモートでも可能ですか？

<select id="product" name="product" onchange="calculatetotal();">
    <option value="5">1-4 years ($5)</option>
    <option value="10">5-9 years ($10)</option>
    <option value="15">10+ years ($15)</option>
</select>
4

3 に答える 3

2

わかりましたので、私はあなたのために何かを作り、テストしてFirefox 15.1かなりうまく動作しましたが、確かにクロスブラウザで問題が発生するでしょう: My Fiddle

HTML

<select id="product" name="product" onchange="calculatetotal();">
    <option value="5" class="red">1-4 years</option>
    <option value="10" class="red">5-9 years</option>
    <option value="15" class="red">10+ years</option>
</select>

CSS

option.red:nth-child(1):after{
    content: "($5)";
    color: red;
}

option.red:nth-child(2):after{
    content: "($10)";
    color: red;
}

option.red:nth-child(3):after{
    content: "($15)";
    color: red;
}
于 2012-10-17T20:23:01.733 に答える
1

JQueryを使用して、次のことを試してください。

$("select option:contains('(')").css("color", "red");

サンプルコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<select id="product" name="product" onchange="calculatetotal();">                   
    <option value="5">0-1 years</option>
    <option value="5">1-4 years ($5)</option>
    <option value="10">5-9 years ($10)</option>
    <option value="15">10+ years ($15)</option>
</select>


<script>
$("select option:contains('(')").css("color", "red");
</script>

</body>
</html>

上記のエイリアン氏の回答を拡張します。

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    option:after{
    content: attr(data-price);
    color: red;
    }
  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<select id="product" name="product" onchange="calculatetotal();">                   
    <option value="0" data-price="">0-1 years</option>
    <option value="5" data-price=" ($5)">1-4 years</option>
    <option value="10" data-price=" ($10)">5-9 years</option>
    <option value="15" data-price=" ($15)">10+ years</option>
</select>

</body>
</html>

「（）」の中にあるものだけを赤にすることができるかどうかはわかりません。デフォルトで含めるだけで最初の「（」を黒にすることができますが、価格を赤のままにして、最後の「）」を再び黒にすることはできません。

幸運を

于 2012-10-17T20:15:15.897 に答える
1

線全体のスタイルを設定したい場合は、CSS で行うことができます。

テキストの一部だけをスタイルしたい場合は、それを行うことはできません。カスタム コントロールを使用する必要があります。

于 2012-10-17T20:15:49.560 に答える