Question

我需要在表单选择选项标签中创建一部分不同颜色的文本，以帮助它脱颖而出。例如，()的任何内容都需要为红色。这甚至可以远程实现吗？

<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>

Answer 1

好的，我已经为你做了一些事情，经过测试并在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;
}

Answer 2

使用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>

延伸到Alien先生的答案：

<!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>

我不确定你只能在＆＃34;（）＆＃34;中做出什么？红色。你可以制作第一个＆＃34;（＆＃34;黑色，只是默认包含它，但我还没有能够制作最后一个＆＃34;）＆＃34;再次黑了，同时保持价格红色。

祝你好运

Answer 3

如果你想整个整行，你可以在CSS中做到这一点。

如果您只想为文本的一部分设置样式，则无法执行此操作。您需要使用custom control。

更改php表单选择选项的一部分的颜色

3 个答案: