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

我需要在表单中选择一个部分的文本选项选项标签以帮助它突出显示。例如，任何带有()的东西都需要为红色。这甚至是远程可能的吗？更改php表单部分的颜色选择选项

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

来源

2012-10-17 Rocco The Taco

你不能用这种方式真正地选择样式，除非你自己实现。 –

好了，所以我做东西给你，测试和运行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-17 20:23:01

太棒了！谢谢！ –

@RoccoTheTaco欢迎您;） –

希望你不支持旧版浏览器。 – epascarello

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

我不是确定你只能做出“（）”r中的内容编辑。您可以制作第一个“（”黑色，默认情况下只包括黑色，但我无法在保持价格红色的情况下再次将最后一个“）黑色”。

好运

来源

2012-10-17 20:15:15

我认为OP只想要括号中的内容是红色的，而不是整个选项。 – Travesty3

您无法格式化

我站好了。见上面的Alien先生的回答。 –

如果你想样式整条生产线，你可以做到这一点在CSS。

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

来源

2012-10-17 20:15:49 epascarello

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

回答

相关问题