chrome浏览器下设立select被选中的选项字体为红色
日期：2014-05-16 浏览次数：20549 次
chrome浏览器下设置select被选中的选项字体为红色
我有如下代码,设置select被选中的项字体为红色
以上代码,在IE浏览器下,能够同时设置select的文本和option选项字体为红色，
在Chrome浏览器下，只能够设置option选项字体为红色，select的文本内容保持不变，请问，我可以做怎样的修改？或者使用什么属性？
------解决方案--------------------
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
select{
color:#F00;
}
option{
color:#000;
}
</style>
<script type="text/javascript">
function init(){
var se=document.getElementById("se");
se.onchange=function(){
var x=this.selectedIndex;
var os=this.getElementsByTagName("option");
for(var i=0;i<os.length;i++){
os[i].style.color="black";
}
os[x].style.color="red";
}
}
window.onload=init;
</script>
</head>
<body>
<select id="se">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
这样？？
我有如下代码,设置select被选中的项字体为红色
function setSelectedItemRed(id)
{
try
{
var mySelect = document.getElementById(id);
var selectedId = mySelect.selectedIndex;
if (parseInt(selectedId) < 0)
{
return;
}
mySelect.options[selectedId].style.color = "red";
}
catch(err)
{
alert(err);
}
}
以上代码,在IE浏览器下,能够同时设置select的文本和option选项字体为红色，
在Chrome浏览器下，只能够设置option选项字体为红色，select的文本内容保持不变，请问，我可以做怎样的修改？或者使用什么属性？
------解决方案--------------------
function setSelectedItemRed(id) {
try {
var mySelect = document.getElementById(id);
var selectedId = mySelect.selectedIndex;
if (parseInt(selectedId) < 0) {
return;
}
mySelect.options[selectedId].style.color = "red";
mySelect.style.color = 'red';
}
catch (err) {
alert(err);
}
}------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
select{
color:#F00;
}
option{
color:#000;
}
</style>
<script type="text/javascript">
function init(){
var se=document.getElementById("se");
se.onchange=function(){
var x=this.selectedIndex;
var os=this.getElementsByTagName("option");
for(var i=0;i<os.length;i++){
os[i].style.color="black";
}
os[x].style.color="red";
}
}
window.onload=init;
</script>
</head>
<body>
<select id="se">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
这样？？
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
