1

我需要将表单选择选项标签中的部分文本设置为不同的颜色以帮助它脱颖而出。例如，任何带有 a 的东西()都必须是红色的。这甚至有可能吗？

<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得很好，但你肯定会遇到跨浏览器的麻烦：我的小提琴

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