考虑以下HTML标记:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>search/master</title>
<style type="text/css">
select{
background-color: pink;
}
option{
background-color: white;
}
</style>
</head>
<body>
<p>
<select>
<option>one........</option>
<option>two........</option>
</select>
</p>
</body>
</html>
在FF上的输出如下:(类似的输出也出现在Chrome,Safari和Opera上)
但是在IE上的输出如下:
使IE上的输出看起来与其他浏览器相似的可靠而简单的解决方法是什么?
最佳答案
如果您确实想这样做,则可以使用1px x 1px的背景图片,并将选项设置为:transparent
select{
background: url(http://ajthomas.co.uk/stackoverflow-help/back.png);
}
option{
background: transparent;
}
查看我为您完成的jsfiddle example