改变颜色的一部分的php形式选择选项
改变颜色的一部分的php形式选择选项
提问于 2012-10-18 04:10:32
我需要使表单中的文本选择选项标签的一部分不同的颜色，以帮助它突出。例如，任何带有()的东西都需要是红色的。这有可能吗？
<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>回答 3
Stack Overflow用户
回答已采纳
发布于 2012-10-18 04:23:02
好了，我已经为您做了一些东西，在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;
}Stack Overflow用户
发布于 2012-10-18 04:15:16
使用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>我不确定您是否可以只将"()“中的内容设置为红色。默认情况下，您可以将第一个"(“设置为黑色，但我不能使最后一个")”再次设置为黑色，同时保持价格为红色。
祝好运
Stack Overflow用户
发布于 2012-10-18 04:15:50
如果你想设置整行的样式，你可以在CSS中实现。
如果您只想设置文本的一部分样式，则不能这样做。您需要使用custom control。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12942558
复制相关文章
相似问题
腾讯云开发者
