如果实际应用中的话，这样效果我建议还是使用图片比较好。
<!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>
<title>Untitled Page</title>
<style>
body, table, div {
font-size :200pt
color:#00800
font-weight:bold
}
</style>
</head>
<body bgcolor ="6094FF">
<div style ="position :absolute top:10pxleft:167px width:268pxheight:267pxz-index:1"><span style ="font-size :200ptcolor:Red ">█</span></div>
<div style="position :absolute top:10pxleft:284px width:268pxheight:267pxz-index:1"><span style ="font-size :200ptcolor:Red ">█</span></div>
<div style="position :absolute top:85pxleft:232px width:68pxheight:67pxz-index:7"><span style ="font-size :50ptcolor:yellow ">★</span></div>
<div style="position :absolute top:153pxleft:297px width:17pxheight:17pxz-index:7"><span style ="font-size :12ptcolor:yellow ">★</span></div>
<div style="position :absolute top:120pxleft:316px width:17pxheight:17pxz-index:7"><span style ="font-size :12ptcolor:yellow ">★</span></div>
<div style="position :absolute top:84pxleft:309pxwidth:17pxheight:17pxz-index:7"><span style ="font-size :12ptcolor:yellow ">★</span></div>
<div style="position :absolute top:63pxleft:278px width:20pxheight:17pxz-index:7"><span style ="font-size :12ptcolor:yellow ">★</span></div>
<div style="position :absolute top:204pxleft:142px width:135pxheight:267pxz-index:7"><span style ="font-size :200ptcolor:red ">▏</span></div>
<span style="position :absolute top:26pxleft:79px width:82pxheight:80pxz-index:10"><span style =" font-family :Webdings font-size :60ptcolor :White "></span></span>
</body>
</html>
css无法满足你上面的要求，css对html控件的控制不全面。唯一办法是：自己做个假的下拉菜单来模拟，然后用 javascript 把值传给真正的html列表下拉菜单。
例如：淘宝你确认收到货物点付款后评分那个1-5分的五角星打分，按html表单就应该是5个很丑的单选项：1分⊙ 2分○ 3分○ 4分○ 5分○
淘宝把它做成了5个空链接，并用css给予5个五星背景图，点了以后把参数传给html表单。
.dot { position: absolutewidth: 6height: 6visibility: hiddenbackground-color: redfont-size: 1pxcursor: pointercursor: handz-index: 100 }.dotoff { position: absolutewidth: 6height: 6visibility: hiddenbackground-color: grayfont-size: 1pxcursor:defaultz-index: 100}
.dotempty { position: absolutewidth: 6height: 6visibility: hiddenbackground-color: orangefont-size: 1pxcursor: pointercursor: handzindex: 100 }
----------替换为-----------
.dot { position: absolutewidth: 16height: 16visibility: hiddenbackground:url(http://img.baidu.com/img/iknow/icn_point.gif)font-size: 1pxcursor: pointercursor: handz-index: 100 }
.dotoff { position: absolutewidth: 16height: 16visibility: hiddenbackground:url(http://img.baidu.com/img/iknow/icn_point.gif)font-size: 1pxcursor:defaultz-index: 100}
.dotempty { position: absolutewidth: 16height: 16visibility: hiddenbackground:url(http://img.baidu.com/img/iknow/icn_point.gif)font-size: 1pxcursor: pointercursor: handzindex: 100 }
图片随意你换了，现在的情况是 满地黄金
