`
abeet
  • 浏览: 4000 次
  • 来自: ...
文章分类
社区版块
存档分类
最新评论

[原创] 美化select控件最简单的办法

企业应用JavaScriptJ#ASP.netIE 
阅读更多
select控件的优先级非常高，许多css属性对它没有作用，精心设计的页面因为一个突兀的原生select控件而减分是大家都头痛的事，
下面的方法是通过JS替换页面内原有的select，
我们希望这个JS是非侵入式的，只要引用了select.js这个js文件的页面，就自动把页面里原有的select控件替换接管了。
先初步地实现selct控件的替换，和基本的交互（暂不考虑接管select的onchange事件等问题）。在下面的实现方法里并没有把原有的select去掉，只是隐藏了起来，所以如果select是在表单内，表单仍然能够正常提交。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style>
body,
table,
input,
textarea,
select{
margin: 0;
font-size: 12px;
line-height:1.5;
font-family: Tahoma, SimSun, sans-serif;
}
.zSelect {
display:inline-block;
*zoom: 1;
*display: inline;
position:relative;
height:20px;
vertical-align:middle;
}
.zSelect .inputText {
line-height: 17px;
font-size:12px;
background: #f7fafc;
padding: 1px 17px 0 1px;
border: 1px solid #68a;
vertical-align: top;
cursor:default;
height: 17px;
margin:0;
}
.zSelect .arrowimg {
display:inline-block;
*zoom: 1;
*display: inline;
position:relative;
cursor:pointer;
width:18px;
height:20px;
left:-18px;
margin-right:-18px;
vertical-align: top;
outline:none;
background: url(http://www.wangzhaohui.com/wp-content/uploads/2009/06/arrow.gif);
}
.zSelect .arrowimg:hover {
background: url(http://www.wangzhaohui.com/wp-content/uploads/2009/06/arrow_over.gif);
}
.optgroup {
position:absolute;
z-index:666;
left:0;
top:19px;
color: #369;
}
.optgroup p{ margin:0;}
.optgroup div.optionsDiv{
padding:1px;
overflow: auto;
overflow-x: hidden;
max-height:300px;
color: #369;
border: 1px solid #678;
background: #f7fafc;
width:auto;
z-index:888;
filter: Alpha(Opacity=90); opacity: 0.9;
}
.optgroup a, .optgroup a:visited{
font-size:12px;
text-decoration:none;
cursor:default;
display:block;
color: #369;
white-space: nowrap;
padding:1px 3px 2px 6px;
_padding:0 3px 0 6px;
height:18px;
min-width:2em;
}
.optgroup a:hover,.optgroup a.selected:hover{
color: #dff;
text-decoration:none;
background:#38d;
}
.optgroup a.selected,.optgroup a:focus{
color: #eff;
text-decoration:none;
background:#49e;
}
</style>
<script>
function replaceSelects() {
    selects = document.getElementsByTagName('select');

    for(var i=0; i < selects.length; i++) {
  var selectWidth=selects.clientWidth;
  var selectArea = document.createElement('span');
  var textInput = document.createElement('input');
  var button = document.createElement('a');
  selectArea.id = "mySelect"+i;
  selectArea.className = "zSelect";
  textInput.type = "text";
  textInput.className = "inputText";
  textInput.readOnly=true;
  textInput.style.width=selectWidth+"px";
  textInput.id = "mySelectText"+i;
  textInput.value = selects.options[0].text;
  button.className = "arrowimg";
  button.href="javascript:showOptions("+i+")";
  button.hideFocus=true;

  selectArea.appendChild(textInput);
  selectArea.appendChild(button);
  
        selects.style.display='none'; 
  
  selects.parentNode.insertBefore(selectArea, selects);
  
  var optgroup = document.createElement('div');
  optgroup.className = "optgroup";
  optgroup.style.width=selectWidth+20+"px";
  optgroup.style.display = "none";
  optgroup.id = "optgroup"+i;
  var optionsDiv = document.createElement('div');
  optionsDiv.className = "optionsDiv";
  optionsDiv.id = "optionsDiv"+i;
  
  optgroup.appendChild(optionsDiv);
  if(selects.id=="")selects.id="select"+i;
  
  selectArea.appendChild(optgroup);
  for(var j=0; j < selects.options.length; j++) {
   var optionHolder = document.createElement('p');
   var optionLink = document.createElement('a');
   var optionTxt = document.createTextNode(selects.options[j].text);
   optionLink.href = "javascript:showOptions("+i+"); selectMe('"+selects.id+"',"+j+","+i+");";
   optionLink.appendChild(optionTxt);
   optionHolder.appendChild(optionLink);
   optionsDiv.appendChild(optionHolder);
   if(selects.options[j].selected){selectMe(selects.id,j,i);}
  }
}
}
function showOptions(g) {
var elem = document.getElementById("optgroup"+g);
elem.style.display=elem.style.display=='none'?'block':'none';
}
function selectMe(selectFieldId,linkNo,selectNo) {
optionLinks = document.getElementById("optionsDiv"+selectNo).getElementsByTagName("a");
for(var k = 0; k < optionLinks.length; k++) {
  if(k==linkNo) {
   optionLinks[k].className = "selected";
  }
  else {
   optionLinks[k].className = "";
  }
}
selectField = document.getElementById(selectFieldId);
for(var k = 0; k < selectField.options.length; k++) {
  if(k==linkNo) {
   selectField.options[k].selected = "selected";
  }
  else {
   selectField.options[k].selected = "";
  }
}
var newText = selectField.options[linkNo].text;
document.getElementById("mySelectText"+selectNo).value=newText;
}
window.onload=replaceSelects;
</script>
<div>当前站点:
<select name="select">
  <option value="123123">政府门户类演示站</option>
  <option value="456456">新闻门户类演示站</option>
  <option value="789789">企业形象类演示站</option>
</select> 
  &lt;&lt;
当前站点:
<select name="select2">
  <option value="123123">政府门户类演示站</option>
  <option value="456456">新闻门户类演示站</option>
  <option value="789789">企业形象类演示站</option>
</select> 
  &lt;&lt;
</div>
OK，在ff3下测试通过，在ie下存在层的定位问题，当弹出下拉列表时需要对层的z-index作调整，在这就不展示了。
如果这个select控件仅在前台作小量的应用，那么适当地添加一些对键盘，鼠标的响应，就差不多可以了。
select控件实现的思考过程和进一步优化请看我的另一个帖子《分享我们的select控件设计过程 》
分享到：
评论
4 楼 s海若 2010-02-16  
一般最常用的方法就是不用select而是在input的上包装层，你的方法对于一些希望保留原始的select但是又想改变select外观的情况确实实用。但貌似有一些bug，帮你修复了bug并且在不伤原貌的前提下做了一些细微的优化。
另外这个var selectWidth=selects.clientWidth;就算指的是某个select也没找到是什么浏览器下的属性，恕才疏学浅，改用直接用最长的option的字符长度计算select的宽度。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>
<head>
<style>  
body,  
table,  
input,  
textarea,  
select{  
    margin: 0;  
    font-size: 12px;  
    line-height:1.5;  
    font-family: Tahoma, SimSun, sans-serif;  
}  
.zSelect {  
    display:inline-block;  
    /*zoom: 1;  
      display: inline; */ 
    position:relative;  
    height:20px;  
    vertical-align:middle;  
}  
.zSelect .inputText {  
    line-height: 17px;  
    font-size:12px;  
    background: #f7fafc;  
    padding: 1px 17px 0 1px;  
    border: 1px solid #68a;  
    vertical-align: top;  
    cursor:default;  
    height: 17px;  
    margin:0;  
}  
.zSelect .arrowimg {  
    display:inline-block;  
    /*zoom: 1;  
    display: inline; */ 
    position:relative;  
    cursor:pointer;  
    width:18px;  
    height:20px;  
    left:-18px;  
    margin-right:-18px;  
    vertical-align: top;  
    outline:none;  
    background: url(http://www.wangzhaohui.com/wp-content/uploads/2009/06/arrow.gif);  
}  
.zSelect .arrowimg:hover {  
    background: url(http://www.wangzhaohui.com/wp-content/uploads/2009/06/arrow_over.gif);  
}  
.optgroup {  
    position:absolute;  
    z-index:666;  
    left:0;  
    top:19px;  
    color: #369;  
}  
.optgroup p{ 
    margin:0;
}  
.optgroup div.optionsDiv{  
    padding:1px;  
    overflow: auto;  
    overflow-x: hidden;  
    max-height:300px;  
    color: #369;  
    border: 1px solid #678;  
    background: #f7fafc;  
    width:auto;  
    z-index:888;  
    filter: Alpha(Opacity=90); opacity: 0.9;  
}  
.optgroup a {  
    font-size:12px;  
    text-decoration:none;  
    cursor:default;  
    display:block;  
    color: #369;  
    white-space: nowrap;  
    padding:1px 3px 2px 6px;  
    /*padding:0 3px 0 6px;  */
    height:18px;  
    min-width:2em;  
}  
.optgroup a:hover {  
    color: #dff;  
    text-decoration:none;  
    background:#38d;  
}  
div.optgroup a.selected{  
    color: #eff;  
    text-decoration:none;  
    background:#49e;  
}  
</style>  
<script>  
function replaceSelects() {   
     var  selects = document.getElementsByTagName('select');
    
    for(var i = 0, sLen = selects.length; i < sLen; i++) {
          var selectWidth = 200; 
          var maxLen = 0;
          var sel = selects[i]; 
          sel.style.display='none';  //隐藏原始列表
          if(!sel.id) sel.id="select"+i;   
          var selId = sel.id;    
          var defaultSelect = -1;
          
          //新建列表区域  
          var fragment = document.createDocumentFragment();
          var selectArea = document.createElement('span');  
          var textInput = document.createElement('input');   
          selectArea.id =  "select_"+selId;  
          selectArea.className = "zSelect";  
          textInput.type = "text";  
          textInput.className = "inputText";  
          textInput.readOnly=true;  
          textInput.id = "input_"+selId;  
          textInput.value = '';  
          var button = document.createElement('a');
          button.id = "arrow_"+selId; 
          button.className = "arrowimg";  
          button.href='javascript:showOptions("optgroup_'+selId+'");';  
          selectArea.appendChild(textInput);  
          selectArea.appendChild(button);
            
          //新建列表菜单
          var optgroup = document.createElement('div');
          optgroup.className = "optgroup";  
          optgroup.style.display = "none";  
          optgroup.id = "optgroup_" + selId;  
          var optionsDiv = document.createElement('div');  
          optionsDiv.className = "optionsDiv";  
          optionsDiv.id = "optionsDiv_"+selId;    
          optgroup.appendChild(optionsDiv);  

          //添加菜单项
          for(var j = 0, soLen =  sel.options.length; j < soLen; j++) {
               var option =   sel.options[j];
               var text = option.text;
               if(text.length > maxLen){
                    maxLen = text.length;
               }    
               var optionLink = document.createElement('a');
               optionLink.href = 'javascript:showOptions("'+optgroup.id+'"); selectMe("'+sel.id+'","'+j+'");';    
               var optionTxt = document.createTextNode(text);       
               optionLink.appendChild(optionTxt);  
               optionsDiv.appendChild(optionLink);                 
               if(option.selected) defaultSelect = j;
          }
         selectWidth = maxLen * 12 + 10;
         textInput.style.width = selectWidth+"px"; 
         optgroup.style.width = selectWidth + 20 + "px";   
          
         selectArea.appendChild(optgroup);
         fragment.appendChild(selectArea);                    
         sel.parentNode.insertBefore(fragment, sel);
          
          //保持默认选项   
         if(defaultSelect != -1){
             selectMe(sel.id,defaultSelect);
         }      
    }  
};
 
function showOptions(optgroupId) {  
    var optgroup = document.getElementById(optgroupId);  
    optgroup.style.display = optgroup.style.display === 'none' ? 'block' : 'none';  
}; 
 
function selectMe(selectId, linkNo) {
    var selectField = document.getElementById(selectId);
    var optionLinks = document.getElementById("optionsDiv_"+selectId).getElementsByTagName("a");
    var newText;  
    for(var k = 0, oLen = optionLinks.length; k < oLen; k++) {
          var option =   selectField.options[k];      
          if(k==linkNo) {  
            optionLinks[k].className = "selected";  
            option.selected = "selected";
            newText  = option.text; 
          } else {  
            optionLinks[k].className = "";
            option.selected = "";    
          }  
    }   
    document.getElementById("input_"+selectId).value=newText;  
}  

window.onload=replaceSelects;  
</script>
</head>  
<body>
<div>当前站点1:  
<select id="select1">  
  <option value="123123">政府站</option>  
  <option value="456456">新闻类演示站</option>  
  <option value="789789">企业形象类演示站</option>  
</select>   
  &nbsp;&nbsp;&nbsp;&nbsp;
    当前站点2:  
<select id="select2">  
  <option value="123123">政府类</option>  
  <option value="456456">新闻门户</option>  
  <option value="789789">企业形象类</option>  
</select>   
</div>
</body>
</html>
3 楼 askyuan 2010-02-16  
楼主能不能把select下拉放大一点？就是原来只能显示2个字，然后下拉了显示20个字，这20个字都能看到
2 楼 moyue 2010-01-28  
看了一遍，实现的很不错，还差点东西：
1.select控件时支持键盘上下键的（↑↓）
2.select控件在弹出后按esc是可以取消的，你这个貌似还没有做到。

说实话，select这个控件很麻烦，不用吧还不行，用吧修改样式太难
1 楼 lobbychmd 2009-06-12  
我也干过这种事情，把原来的textbox 隐藏，加个 select， 然后select 改变后同步 textbox，但是在 asp.net里面做的，要考虑页面回发，麻烦很多。。。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css实现表单Select样式美化

    为了提供更好的用户体验和符合整体界面设计风格，我们可以使用CSS来对Select进行样式美化。下面我们将详细探讨如何通过CSS实现这一目标。 首先，我们需要理解Select元素的结构。一个Select元素通常包含多个Option...

    jQuery Select下拉框美化表单.zip

    在网页设计中，表单元素是与用户交互的重要组成部分，其中下拉框（Select）是最常见的输入控件之一。然而，原生的HTML下拉框样式通常较为简单，无法满足现代网页美观的需求。针对这一问题，开发者们常常借助...

    jquery.selectlist.js插件实现的下拉框美化特效.zip

    总之，`jquery.selectlist.js`插件为开发者提供了一种简单且强大的方式来美化和优化网页中的下拉框元素。通过深入理解插件的工作原理和使用方法，我们可以将其灵活运用到实际项目中，提升网站的交互性和美观度。而...

    Select2实现全国省市区三级联动下拉菜单

    `images`文件夹可能包含了一些用于美化Select2样式的图片资源，如占位符图标或者加载指示器等。这些图片可以通过CSS引用并应用到Select2的组件上，提升用户的视觉体验。 `js`文件夹则包含JavaScript代码，通常是...

    一个简单轻量的jQuery插件来创建美化的下拉菜单

    "一个简单轻量的jQuery插件来创建美化的下拉菜单"是一个专门针对这一需求设计的工具，它能够帮助开发者快速、便捷地为网站增添美观且功能强大的下拉菜单。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、...

    C#记事本最详细最全代码 包括所有功能 简单易懂 便于初学者提高水平

    在C#中，我们可以利用`TextBox`控件提供的`Select()`和`Copy()`方法实现选中文本的复制，而`Cut()`方法则可以实现剪切功能。这两个操作都需要先确保有选定的文本，然后调用相应的方法。需要注意的是，剪切操作会清除...

    chosen（下拉框多选）

    Chosen库的核心功能是将普通的`&lt;select&gt;`元素转化为具有搜索功能、可多选的交互式控件。它使得用户可以更方便地浏览大量选项，并且支持在输入时动态过滤结果。这种改进后的下拉框增强了用户体验，提高了用户在网页...

    幻灯片显示用户控件

    SqlCommand cmd = new SqlCommand("SELECT * FROM Slides", conn); SqlDataAdapter adapter = new SqlDataAdapter(cmd); DataSet ds = new DataSet(); adapter.Fill(ds); DataList1.DataSource = ds; ...

    简单的form表单模板

    表单通常包含各种输入控件，如`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`等。下面是一些常见的输入类型： 1. `&lt;input type="text"&gt;` - 文本输入框，用户可输入任意文本。 2. `&lt;input type="email"&gt;` - 邮箱输入框，验证...

    C#程序开发范例宝典（第2版）.part13

    实例054 美化ComboBox控件下拉列表 63 实例055 用ComboBox控件制作浏览器网址输入框 64 2.3 RichTextBox控件应用 65 实例056 在RichTextBox控件中添加超链接文字 65 实例057 在RichTextBox控件中显示RTF格式的...

    C#程序开发范例宝典（第2版）.part08

    实例054 美化ComboBox控件下拉列表 63 实例055 用ComboBox控件制作浏览器网址输入框 64 2.3 RichTextBox控件应用 65 实例056 在RichTextBox控件中添加超链接文字 65 实例057 在RichTextBox控件中显示RTF格式的...

    C#程序开发范例宝典（第2版）.part02

    实例054 美化ComboBox控件下拉列表 63 实例055 用ComboBox控件制作浏览器网址输入框 64 2.3 RichTextBox控件应用 65 实例056 在RichTextBox控件中添加超链接文字 65 实例057 在RichTextBox控件中显示RTF格式的...

    C#程序开发范例宝典（第2版）.part12

    实例054 美化ComboBox控件下拉列表 63 实例055 用ComboBox控件制作浏览器网址输入框 64 2.3 RichTextBox控件应用 65 实例056 在RichTextBox控件中添加超链接文字 65 实例057 在RichTextBox控件中显示RTF格式的...

Magicbox
Global site tag (gtag.js) - Google Analytics