tec*_*ead 5 css firefox jquery
我正在尝试更改所选选项的文本颜色.它在IE中工作,但在Firefox中没有.
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("option:selected").css("color", "green");
});
</script>
</head>
<body>
<select id="mySelect">
<option selected="selected">option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</body>
</html>
更新
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("select").css("color", "green").focus(function() {
$(this).css('color', 'black');
}).blur(function() {
$(this).css('color', 'green');
});
});
</script>
</head>
<body>
<select id="mySelect">
<option selected="selected">option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</body>
</html>
更新2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
select.green{
color: green;
}
option {
color: black;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var green = $('option:selected', 'select').data('green');
if (green) {
$('select').addClass('green');
}
$('select').change(function() {
var green = $('option:selected', this).data('green');
if (green) {
$('select').addClass('green');
}
else {
$('select').removeClass('green');
}
});?
});
</script>
</head>
<body>
<select id="mySelect">
<option selected="selected" data-green="true">option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</body>
</html>
这可能不是您正在寻找的解决方案,但您可以在css中执行此操作:
option[selected] {
color: green;
}
这仅适用于支持属性选择器的浏览器(IE7 +)
编辑:阅读您的评论后,我明白您想要实现的目标.你想让select绿色和所选元素(option)绿色(其余为黑色).您可以使用以下css代码执行此操作:
select {
color: green;
}
option[selected] {
color: green;
}
option {
color: black;
}
看我的JSFiddle.但是,选择其他选项后颜色不会更改.
看看这里：
http://benalman.com/code/projects/jquery-misc/examples/selectcolorize/
默认情况下，Internet Explorer 和 Opera 中的选择元素会显示所选选项的颜色和背景颜色，而 Firefox 和 WebKit 浏览器则不会。jQuery selectColorize 标准化了这种跨浏览器行为，以实现基本的选择框颜色样式，而不必求助于更“花哨”的选择框替换。