無下拉箭頭的Select下拉框，實現(xiàn)網(wǎng)頁背景切換

2024-09-05 12:22:01

字體：大中小

供稿：網(wǎng)友

一種比較笨的更換網(wǎng)頁背景色的方法，實際上本例是想表達如何徹底生成一個無下拉箭頭的Select選擇框，且支持火狐、Chrome等眾多主流瀏覽器，源代碼分享給大家參考學(xué)習(xí)。

<!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=big5"><title>徹底無下拉箭頭的Select選框</title></head><body>徹底無下拉箭頭的Select選框支持IE-Firefox-Chrome<br><br><select style="position:absolute;clip: rect(3px 30px 18px 3px);"><script language="JavaScript">for (i=1; i<13; i++)document.write('<option>'+i+'月</option>')//--></script></select><br><br><script type="text/javascript">function get_cookie(name) {    search=name + "="     if (document.cookie.length > 0) {        offset = document.cookie.indexOf(search)        if (offset >= 0) {            offset += search.length            end = document.cookie.indexOf(";", offset)            if (end == -1) end=document.cookie.length            return unescape(document.cookie.substring(offset, end))       }   }   return null} function setcolor() {      choice=document.back.colar.selectedIndex      new_colar=document.back.colar.options[choice].value      document.bgColor= new_colar      document.cookie= "backgroundcolor=" + new_colar}if (get_cookie("backgroundcolor")!="") document.bgColor=get_cookie("backgroundcolor")</script><form name="back" size="0"><select name="colar" onclick="color()" style="position:absolute;clip: rect(3px 95px 18px 3px);font-size:12px"><option>--默認背景顏色--</option>	<option value="#66aaff" style="background-color: #66aaff">33333</option>	<option value="#dddddd" style="background-color: #dddddd"></option>	<option value="blue"    style="background-color: blue"></option>	<option value="skyblue" style="background-color: skyblue"></option>	<option value="#aaccff" style="background-color: #aaccff"></option>	<option value="green"   style="background-color: green"></option>	<option value="#33dd33" style="background-color: #33dd33"></option>	<option value="#80ff80" style="background-color: #80ff80"></option>	<option value="#ccffcc" style="background-color: #ccffcc"></option>	<option value="orange"  style="background-color: orange"></option>	<option value="#ffccdd" style="background-color: #ffccdd"></option>        <option value="silver" style="background-color: silver"></option>	<option value="yellow" style="background-color: yellow"></option>	<option value="#eabe83" style="background-color: #eabe83"></option>        <option value="#cccc66" style="background-color: #cccc66"></option>        <option value="#777777" style="background-color: #777777"></option>        <option value="#555555" style="background-color: #555555"></option>	<option value="#222222" style="background-color: #222222"></option></option></select><input type="button" value="確定" onClick="setcolor()" style="position:absolute;left:130px;width:40px;height:18px"></form> <br><br></body></html>

上一篇：仿搜狐視頻圖片內(nèi)容切換效果

下一篇：全兼容CSS背景漸變代碼