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

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

javascript css

Javascript 更改php表单选择选项部分的颜色,javascript,css,Javascript,Css,我需要使表单选择选项标签中的一部分文本具有不同的颜色，以帮助它脱颖而出。任何带有（）的东西都需要是红色，例如。这有可能吗 <select id="product" name="product" onchange="calculatetotal();"> <option value="5">1-4 years ($5)</option> <option value="10">5-9 years ($10)</option>

我需要使表单选择选项标签中的一部分文本具有不同的颜色，以帮助它脱颖而出。任何带有

（）

的东西都需要是红色，例如。这有可能吗

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


1-4年（5美元）
5-9年（10美元）
10年以上（15美元）

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


0-1年
1-4年（5美元）
5-9年（10美元）
10年以上（15美元）
$（“选择选项：包含（“（”）”）.css（“颜色”、“红色”）；

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


选择：之后{
内容：attr（数据价格）；
颜色：红色；
}
0-1年
1-4年
5-9年
10年以上

我不确定你只能把“（）”红色里面的东西变成黑色。你可以把第一个“（“默认情况下只包括它就变成黑色，但我不能把最后一个”）变成黑色，同时保持红色的价格

祝您好运

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


0-1年
1-4年（5美元）
5-9年（10美元）
10年以上（15美元）
$（“选择选项：包含（“（”）”）.css（“颜色”、“红色”）；

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


选择：之后{
内容：attr（数据价格）；
颜色：红色；
}
0-1年
1-4年
5-9年
10年以上

祝你好运

如果你想设计整行的样式，你可以用CSS来做

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

如果您想为整行设置样式，则可以使用CSS执行此操作

如果您只想为部分文本设置样式，则无法完成。您需要使用。

好的，我为您制作了一些东西，在

Firefox 15.1

上进行了测试并运行得很好，但您肯定会遇到跨浏览器问题：

HTML

好的，我已经为您做了一些东西，在

Firefox15.1

上测试并运行得很好，但您肯定会遇到跨浏览器问题：

HTML

我认为OP只希望括号中的东西是红色的，而不是整个选项。你不能格式化标签内的任何内容。至少据我所知。你必须构建一个菜单系统来实现这一点。糟糕，如果我能将红色限制在（）您可以将此与上面Alien先生的CSS解决方案结合起来。很抱歉，我昨天一整天都忙于工作。请参阅我更新的答案。干杯。我认为OP只希望括号中的内容为红色，而不是整个选项。您无法格式化标签内的任何内容。至少据我所知。您必须创建一个菜单s真糟糕，如果我能把红色限制在（）您可以将其与上面Alien先生的CSS解决方案结合起来。很抱歉，我昨天一整天都忙于工作。请参阅我更新的答案。干杯。除非您实现自己的选项，否则您无法以这种方式设置选项的样式。除非您实现自己的选项，否则您无法以这种方式设置选项的样式。希望您不支持较旧的浏览器。@epascarello and其他浏览器也很惊讶，只是firefox支持，但我就是这么做的。希望您不支持较旧的浏览器。@epascarello和其他浏览器也很惊讶，只是firefox支持，但我就是这么做的。。