HTML里select的CSS样式的改变分享-计算机技术网

本以为可以很简单的在CSS里像input那样的给解决，结果没想到试了一下才知道常规的CSS根本没法改变的select样式，CSS里怎么弄，select都仍然是默认的那三维的样式。于是在网上搜索了一下，才知道，原来这个select是不能用常规的方法来定义CSS样式的。要用特殊的方法来处理。相信有很多朋友在处理网页的时候都会遇到这个问题，于是找了一篇不错的文章转过来，希望对大家有帮助————

首先要告诉大家，如果你是用css的方法，除了箭头部分，其他都可以改变，这是很令人别扭的事，因为其他的样式改了，箭头部分改不了等于无用。
下面举个css改select的例子

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

如果你想彻底的改变select的样子，有一种方法是用htc，但它有个缺点就是除了ie内核的，其他的他不支持。
举个例子，下载地址如下：下载此文件
第二种方法就是用js，这其实是模拟select的效果，代码如下：

<html>  <head>  <title>Untitled Document</title>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  </p>
<style>  .table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px}  .td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;}  .td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px}  .slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000;}  .down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1 solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold;  }  .seldiv{  position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000;  SCROLLBAR-FACE-COLOR: #d0dff7;  SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7;  SCROLLBAR-SHADOW-COLOR: #FFFFFF;  SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;  SCROLLBAR-ARROW-COLOR: #ffffff;  SCROLLBAR-TRACK-COLOR: #ffffff;  SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;}  </style>
<p>  <script language="JavaScript">  document.onclick=hiddenDiv;  function getDivCount() {  var arr=document.all;  re=0;  for (i=0;i<arr.length;i++) {  str=arr[i].id;  if (str.indexOf("ZfDiv_")==0) {  re++;  }  }  return re;  }  function getI(ObjId) {//取得objId的最后一位数字  for (i=0;i<ObjId.length;i++) {  if (ObjId.charAt(i)=="_") return ObjId.substr(i+1,ObjId.length-1);  }  return 0;  }  function select_edit(TextObj){//鼠标经过高亮度  TextObj.focus();TextObj.select();  }  function checkValue(ID){  var sl=document.all["ZfText_"+ID];  var sv=document.all["ZfDiv_"+ID];  var da=document.all["ZfData_"+ID];  sv.style.display=''  for(i=0;i<da.rows.length;i++)da.rows[i].style.display=''  for(i=0;i<da.rows.length;i++){  if(da.rows[i].cells[0].innerText.indexOf(sl.value)!=0)da.rows[i].style.display='none';  getPosition(ID);  }  }  function getL(e){  var l=e.offsetLeft;  while(e=e.offsetParent){  l+=e.offsetLeft;  }  return l  }  function getT(e){  var t=e.offsetTop;  while(e=e.offsetParent){  t+=e.offsetTop;  }  return t  }  function getPosition(ID){  var sv=document.all["ZfDiv_"+ID];  var sl=document.all["ZfText_"+ID];  var spn=document.all["ZfSpan_"+ID];  var da=document.getElementById("ZfData_"+ID);  sv.style.pixelWidth=spn.offsetWidth;  da.style.pixelWidth=sv.offsetWidth;  sv.style.pixelLeft=getL(spn);  sv.style.pixelTop=getT(spn)+sl.offsetHeight+3;  if(da.offsetHeight>200){  sv.style.pixelHeight=200;  sv.style.overflowY='scroll';  }  else {  sv.style.pixelHeight=da.offsetHeight;  sv.style.overflowY='hidden';  }  }  function dropDown(ID){  var sv=document.all["ZfDiv_"+ID]  var tb=document.all["ZfData_"+ID]  if(sv.style.display=='none'){  sv.style.display='';  for(i=0;i<tb.rows.length;i++)tb.rows[i].style.display=''  getPosition(ID);  } else {  sv.style.display='none';  }  }//下拉摸拟层  function hiddenDiv(){  var o=window.event.srcElement.id;  var tb  var sv  if(o=="") {  for (j=0;j<getDivCount();j++) {  tb=document.getElementById('ZfData_'+j);  sv=document.getElementById('ZfDiv_'+j);  for(i=0;i<tb.rows.length;i++) tb.rows[i].style.display='';  sv.style.display='none';  }  }  }//隐藏模拟层  function setValue(obj){  var i=getI(obj.parentElement.parentElement.parentElement.id);  //alert(obj.parentElement.parentElement.parentElement.id);  var sl=document.all["ZfText_"+i];  var sv=document.all['ZfDiv_'+i];  sl.value=obj.innerText;  sv.style.display='none';  //sldIndex=obj.parentElement.rowIndex;  }//给文本框赋值  function over(obj){  obj.className="td_over"  obj.title=obj.innerText  obj.focus();  }//鼠标经过变色  function out(obj){  obj.className="td_out"  }//鼠标离开还原  function String.prototype.Trim(){return this.replace(/(^s*)|(s*$)/g,'')}//自定义去空格函数Trim()  //增加list的接口,ID表示该组控件是页面中的第几个  function add(v,ID){  var sv=document.all['ZfDiv_'+ID];  if(!v.Trim()){return;}  var tb=document.all['ZfData_'+ID];  var c=tb.insertRow(tb.rows.length).insertCell();  c.innerHTML='<nobr>'+v.Trim()+'</nobr>';  c.onmouseover=new Function("over(this)");  c.onmouseout=new Function("out(this)");  c.onclick=new Function("setValue(this)");  c.className="td_out";  v='';  }  //增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空  function addText(name,DefValue) {  var i=getDivCount();  document.write('<span id="ZfSpan_'+i+'" style="border:1 solid #9CA0CB">');  document.write('<input type="text" value="'+DefValue+'" name="'+name+'" id="ZfText_'+i+'" ondblclick="ZfDrop_'+i+'.click()" class="slv" onmouseover="select_edit(this)"  onkeyup="checkValue('+i+')"><input type=button id="ZfDrop_'+i+'" value=">" onclick="this.hideFocus=true;dropDown('+i+');" class="down" onmouseover="this.style.backgroundColor=#EEF3FD" onmouseout="this.style.backgroundColor=''" onmousedown="this.style.backgroundColor=#ABC4F5" onmouseup="this.style.backgroundColor=''"></span>');  document.write('</p>
<div id="ZfDiv_'+i+'" class="seldiv" style="display:none;">
<table id="ZfData_'+i+'" onselectstart="return false" border="0"  cellspacing="0" cellpadding="0" class="table1"></table>
</div>
<p>');  }  </script>  </head>  <body>  <script language="JavaScript">  addText("name1","a");  add("1234",0);  add("1234",0);  addText("name1","a");  add("1234",1);  add("1234",1);  </script>          </p>
<style>  .select{border: 0 inset buttonface; width: 100; font: icon; cursor: default;}  .selected{border: 0 inset buttonface; background: window; padding: 0; font: icon;}  .selectTable{height: 100%; width: 100%;border: 2 inset buttonhighlight; background: buttonface;}  .option    {font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100%;}  .dropDown{position: absolute; visibility: hidden; width: 100%;border: 1 solid windowtext; padding: 0;background: window;}  .select .button    {width: 16px; height: 5; font-family: webdings; padding: 0;font-size: 11px; border: 2 outset buttonhighlight;}  </style>
<p>  <script type="text/javascript">  var overOptionCss = "background: highlight; color: highlighttext";  var sizedBorderCss = "2 inset buttonhighlight";  var globalSelect;  var ie4 = (document.all != null);  var q = 0;  function initSelectBox(el) {  copySelected(el);  var size = el.getAttribute("size");  el.options = el.children[1].children;  el.selectedIndex = findSelected(el);  el.remove = new Function("i", "int_remove(this,i)");  el.item   = new Function("i", "return this.options[i]");  el.add    = new Function("e", "i", "int_add(this, e, i)");  el.options[el.selectedIndex].selected = true;  dropdown = el.children[1];  if (size != null) {  if (size > 1) {  el.size = size;  dropdown.style.zIndex = 0;  initSized(el);  }  else {  el.size = 1;  dropdown.style.zIndex = 99;  if (dropdown.offsetHeight > 200) {  dropdown.style.height = "200";  dropdown.style.overflow = "auto";  }  }  }  highlightSelected(el,true);  }  function int_remove(el,i) {  if (el.options[i] != null)  el.options[i].outerHTML = "";  }  function int_add(el, e, i) {  var html = "</p>
<div class='option' noWrap";  if (e.value != null)  html += " value='" + e.value + "'";  if (e.style.cssText != null)  html += " style='" + e.style.cssText + "'";  html += ">";  if (e.text != null)  html += e.text;  html += "</div>
<p>"  if ((i == null) || (i >= el.options.length))  i = el.options.length-1;  el.options[i].insertAdjacentHTML("AfterEnd", html);  }  function initSized(el) {  var h = 0;  el.children[0].style.display = "none";  dropdown = el.children[1];  dropdown.style.visibility = "visible";  if (dropdown.children.length > el.size) {  dropdown.style.overflow = "auto";  for (var i=0; i<el.size; i++) {  h += dropdown.children[i].offsetHeight;  }  if (dropdown.style.borderWidth != null) {  dropdown.style.pixelHeight = h + 4;  }  else  dropdown.style.height = h;  }  dropdown.style.border = sizedBorderCss;  el.style.height = dropdown.style.pixelHeight;  }  function copySelected(el) {  var selectedIndex = findSelected(el);  selectedCell = el.children[0].rows[0].cells[0];  selectedDiv  =     el.children[1].children[selectedIndex];  selectedCell.innerHTML = selectedDiv.outerHTML;  }  function findSelected(el) {  var selected = null;  ec = el.children[1].children;  var ecl = ec.length;  for (var i=0; i<ecl; i++) {  if (ec[i].getAttribute("selected") != null) {  if (selected == null) {  selected = i;  }  else  ec[i].removeAttribute("selected");  }  }  if (selected == null)  selected = 0;  return selected;  }  function toggleDropDown(el) {  if (el.size == 1) {  dropDown = el.children[1];  if (dropDown.style.visibility == "")  dropDown.style.visibility = "hidden";  if (dropDown.style.visibility == "hidden")  showDropDown(dropDown);  else  hideDropDown(dropDown);  }  }  function optionClick() {  el = getReal(window.event.srcElement, "className", "option");  if (el.className == "option") {  dropdown  = el.parentElement;  selectBox = dropdown.parentElement;  oldSelected = dropdown.children[findSelected(selectBox)]  if(oldSelected != el) {  oldSelected.removeAttribute("selected");  el.setAttribute("selected", 1);  selectBox.selectedIndex = findSelected(selectBox);  }  if (selectBox.onchange != null) {  if (selectBox.id != "") {  eval(selectBox.onchange.replace(/this/g, selectBox.id));  }  else {  globalSelect = selectBox;  eval(selectBox.onchange.replace(/this/g, "globalSelect"));  }  }  if (el.backupCss != null)  el.style.cssText = el.backupCss;  copySelected(selectBox);  toggleDropDown(selectBox);  highlightSelected(selectBox, true);  }  }  function optionOver() {  var toEl = getReal(window.event.toElement, "className", "option");  var fromEl = getReal(window.event.fromElement, "className", "option");  if (toEl == fromEl) return;  var el = toEl;  if (el.className == "option") {  if (el.backupCss == null)  el.backupCss = el.style.cssText;  highlightSelected(el.parentElement.parentElement, false);  el.style.cssText = el.backupCss + "; " + overOptionCss;  this.highlighted = true;  }  }  function optionOut() {  var toEl = getReal(window.event.toElement, "className", "option");  var fromEl = getReal(window.event.fromElement, "className", "option");  if (fromEl == fromEl.parentElement.children[findSelected(fromEl.parentElement.parentElement)]) {  if (toEl == null)  return;  if (toEl.className != "option")  return;  }  if (toEl != null) {  if (toEl.className != "option") {  if (fromEl.className == "option")  highlightSelected(fromEl.parentElement.parentElement, true);  }  }  if (toEl == fromEl) return;  var el = fromEl;  if (el.className == "option") {  if (el.backupCss != null)  el.style.cssText = el.backupCss;  }  }  function highlightSelected(el,add) {  var selectedIndex = findSelected(el);  selected = el.children[1].children[selectedIndex];  if (add) {  if (selected.backupCss == null)  selected.backupCss = selected.style.cssText;  selected.style.cssText = selected.backupCss + "; " + overOptionCss;  }  else if (!add) {  if (selected.backupCss != null)  selected.style.cssText = selected.backupCss;  }  }  function hideShownDropDowns() {  var el = getReal(window.event.srcElement, "className", "select");  var spans = document.all.tags("SPAN");  var selects = new Array();  var index = 0;  for (var i=0; i<spans.length; i++) {  if ((spans[i].className == "select") && (spans[i] != el)) {  ropdown = spans[i].children[1];  if ((spans[i].size == 1) && (dropdown.style.visibility == "visible"))  selects[index++] = dropdown;  }  }  for (var j=0; j<selects.length; j++) {  hideDropDown(selects[j]);  }  }  function hideDropDown(el) {  if (typeof(fade) == "function")  fade(el, false);  else  el.style.visibility = "hidden";  }  function showDropDown(el) {  if (typeof(fade) == "function")  fade(el, true);  else if (typeof(swipe) == "function")  swipe(el, 2);  else  el.style.visibility = "visible";  }  function initSelectBoxes() {  var spans = document.all.tags("SPAN");  var selects = new Array();  var index = 0;  for (var i=0; i<spans.length; i++) {  if (spans[i].className == "select")  selects[index++] = spans[i];  }  for (var j=0; j<selects.length; j++) {  initSelectBox(selects[j]);  }  }  function getReal(el, type, value) {  temp = el;  while ((temp != null) && (temp.tagName != "BODY")) {  if (eval("temp." + type) == value) {  el = temp;  return el;  }  temp = temp.parentElement;  }  return el;  }  if (ie4) {  window.onload = initSelectBoxes;  document.onclick = hideShownDropDowns;  }  function writeSelectBox(matrix, id, size, onchange, css) {  var d = window.document;  var ie4 = (document.all != null);  if (ie4) {  //alert("Before!");  var s = createIEString(matrix, id, size, onchange, css);  document.write(s);  //alert("After!");  }else  {  document.write(createXString(matrix, id, size, onchange, css));}  }  function createIEString(matrix, id, size, onchange, css) {  var str = "";  str += '<span class="select"';  if (size == null)  size = 1;  str += ' size="' + size + '"';  if (id != null)  str += ' id="' + id + '"';  if (onchange != null)  str += ' onchange="' + onchange + '"';  if (css != null)  str += ' style="' + css + '"';  str += '>n';  str += '</p>
<table class="selectTable" cellspacing="0" cellpadding="0"n';  str += ' onclick="toggleDropDown(this.parentElement)">n';  str += '</p>
<tr>n';  str += '</p>
<td class="selected"> </td>
<p>n';  str += '</p>
<td align="CENTER" valign="MIDDLE" class="Button"n';  str += ' onmousedown="this.style.border='2 inset buttonhighlight'"n';  str += ' onmouseup="this.style.border='2 outset buttonhighlight'">n';  str += '<span style="position: relative; left: 0; top: -2; width: 100%;">6</span></td>
<p>n';  str += '</tr><p>n';  str += '</table><p>n';  str += '</p>
<div class="dropDown" onclick="optionClick()" onmouseover="optionOver()" onmouseout="optionOut()">n';  for (var i=0; i<matrix.length; i++) {  html     = matrix[i].html;  value    = matrix[i].value;  css      = matrix[i].css;  selected = matrix[i].selected;  str += '

<div class="option"';  if (value != null)  str += ' value="' + value + '"';  if (css != null)  str += ' style="' + css + '"';  if (selected != null)  str += ' selected';  str += '>n';  str += html;  str += '</div>
<p>n';  }  str += '</p></div>
<p>n';  str += '</span>n';  return str;  }  function createXString(matrix, id, size, onchange, css) {  var str = '</p>
<form>n';  str += '<select';  if (size == null)  size = 1;  str += ' size="' + size + '"';  if (id != null)  str += ' id="' + id + '"';  if (onchange != null)  str += ' onchange="' + onchange + '"';  str += '>n';  for (var i=0; i<matrix.length; i++) {  html     = matrix[i].html;  value    = matrix[i].value;  css      = matrix[i].css;  selected = matrix[i].selected;  str += 'n<option';  if (value != null)  str += ' value="' + value + '"';  if (selected != null)  str += ' selected';  str += '>';  str += stripTags(html);  str += '</option>n';  }  str += 'n</select>n';  str += '</form>
<p>n';  return str;  }  function stripTags(str) {  var s = 0;  var e = -1;  var r = "";  s = str.indexOf("<",e);  do {  r += str.substring(e + 1,s);  e = str.indexOf(">",s);  s = str.indexOf("<",e);  }  while ((s != -1) && (e != -1))  r += str.substring(e + 1,str.length);  return r;  }  function Option(html, value, css, selected) {  this.html = html;  this.value = value;  this.css = css;  this.selected = selected;  }  </script>  <script type="text/javascript">  var optionArray = new Array();  optionArray[0] = new Option("Item 1", "value 1", "color: blue; text-decoration: underline;");  optionArray[1] = new Option("Item <b>2</b>", "value 2");  optionArray[2] = new Option("Item 3", "value 3", "color: red;", "selected");  optionArray[3] = new Option("Item 4", "value 4");  optionArray[4] = new Option("Item 5", "value 5");  writeSelectBox(optionArray, "select1", 1, "alert(this.options[this.selectedIndex].value)", "margin-left: 10;");  </script>     <script type="text/javascript">  writeSelectBox(optionArray, "select3", 3, "alert(this.options[this.selectedIndex].value)", "margin-left: 10;");  </script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <title></title>  </p>
<style type="text/css">    </style>
<style>  BODY {  SCROLLBAR-FACE-COLOR: #d80000;  SCROLLBAR-HIGHLIGHT-COLOR: #0000fc;  SCROLLBAR-SHADOW-COLOR: #24fc90;  SCROLLBAR-ARROW-COLOR: #fcfc48;  SCROLLBAR-TRACK-COLOR: #002400;  SCROLLBAR-DARKSHADOW-COLOR: #00b448;  SCROLLBAR-BASE-COLOR: #fc0000  }  </style>
<p>  <script  lanuage="JScript">  function  turnit(ss)  {  if  (ss.style.display=="none")  {ss.style.display="";  }  else  {ss.style.display="none";  }  }  function sele(tid)  {  bb.style.display='none';  text1.value=tid.innerText;  }  function over(tid)  {  for (var i=1;i<4;i++)  {  eval('t'+i).className=''  }  tid.className='ss'  }  function out(tid)  {  if (bb.style.display!='none')  tid.className=''  }  </script>  </p>
<style type="text/css">    </style>
<p>  </head>  <body>  </p>
<table width="98" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="98" nowrap>  <input name="text1" type="text" size="10" readonly value=请选择 onclick=turnit(bb)><input name="Submit" type="text" value="" readonly onclick=turnit(bb)>  </td>
</tr>
<tr>
<td style=display:none>
<div style="position:absolute; width:98px; height:100px; overflow: scroll; overflow-x:hidden; z-index: 1;" >
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td onmouseover =over(this) onmouseout =out(this) onclick=sele(this)>选择1</td>
</tr>
<tr>
<td onmouseover =over(this) onmouseout =out(this) onclick=sele(this)>选择2</td>
</tr>
<tr>
<td onmouseover =over(this) onmouseout =out(this) onclick=sele(this)>选择3</td>
</tr>
</table></div>
</td>
</tr>
</table>
<p>  </body>  </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

----想了解更多的数据库相关异常处理怎么解决关注<计算机技术网(www.ctvol.com)!!>

本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址：https://www.ctvol.com/dtteaching/80905.html

HTML里select的CSS样式的改变分享

精彩推荐