据我所知，在IE中是不可能的，因为它使用OS组件。

这里是一个link控制被替换，但我不知道你是否想要做什么。

编辑：链路断开时，我倾倒内容

`<select>`新的东西，1

部分由亚伦·古斯塔夫森

所以，你已经建立了一个漂亮的，符合标准网站利用最新的和最大的CSS技术。你已经掌握了每一个元素的造型设计，但是在你的脑海里，有一点声音在唠叨着你是多么的难看。那么，今天我们将探索一种方法来沉默这种小声音，并真正完成我们的设计。通过一个小小的DOM脚本和一些有创意的CSS，你也可以让你的<select>很漂亮......而且你不会牺牲可访问性，可用性或优雅的降级。

的问题

我们都知道<select>只是普通的难看。实际上，许多人试图限制它的使用，以避免它的经典网络大约在1994年的插图边界。我们不应该使用<select>来避免，虽然 - 它是当前表格工具集的重要组成部分;我们应该接受它。也就是说，一些创造性思维可以提高它。

的`<select>`

我们将使用一个简单的为我们的例子：

<select id="something" name="something"> 
    <option value="1">This is option 1</option> 
    <option value="2">This is option 2</option> 
    <option value="3">This is option 3</option> 
    <option value="4">This is option 4</option> 
    <option value="5">This is option 5</option> 
</select>

[注：这暗示该<select>是一个完整的形式而言]

所以我们在<select>内有五个<option>。这<select>有一个唯一分配的id“的东西。”根据不同的浏览器/平台上你上观看它，你<select>可能看起来大致是这样的：

A <select> as rendered in Windows XP/Firefox 1.0.2. http://v2.easy-designs.net/articles/replaceSelect/images/ffSelect.png

或本

A <select> as rendered in Mac OSX/Safari 1.2. http://v2.easy-designs.net/articles/replaceSelect/images/safariSelect.png

比方说，我们要使它看起来更现代一些，可能是这样的：

Our concept of a nicely-styled <select>. http://v2.easy-designs.net/articles/replaceSelect/images/desiredSelect.png

那么我们该怎么做呢？保持基本的<select>不是一个选项。除了基本的背景颜色，字体和颜色的调整，你并不是真的有很多控制权。然而，我们可以在不牺牲语义，可用性或可访问性的情况下，以新的形式模仿<select>的卓越功能。为了这样做，我们需要检查一个<select>的性质。

A <select>本质上是一个无序的选择列表，您可以在其中选择一个值与表格的其余部分一起提交。所以，实质上，这是一个类固醇<ul>。继续这一思路，我们可以用替换<select>一个无序列表，只要我们给它一些增强功能。由于<ul>可以以各种不同的方式进行样式设计，因此我们几乎可以免费入住。现在问题变成了“如何确保我们在使用<ul>时保持<select>的功能？”在其他单词中，如果我们不再使用表单控件，我们如何提交正确的值以及表单？

解决方案

输入DOM。这个过程的最后一步是使<ul> 函数/感觉像<select>，我们可以用 JavaScript/ECMA脚本和一点聪明的CSS来完成。这里是需求基本列表中，我们需要有一个功能性人造<select>：

单击列表中打开它，
点击列表中的项目，更改分配&关闭列表中的值，
当没有选择任何内容时显示默认值，并且
显示选择某项时选择的列表项。

有了这个计划，我们就可以开始相继解决各个部分。

构建列表

所以首先我们需要收集所有的属性和s的出，重建它作为一个。我们通过运行以下 JS做到这一点：“现在是什么，如果有发生的情况选择<option> 已经”

function selectReplacement(obj) { 
    var ul = document.createElement('ul'); 
    ul.className = 'selectReplacement'; 
    // collect our object's options 
    var opts = obj.options; 
    // iterate through them, creating <li>s 
    for (var i=0; i<opts.length; i++) { 
    var li = document.createElement('li'); 
    var txt = document.createTextNode(opts[i].text); 
    li.appendChild(txt); 
    ul.appendChild(li); 
    } 
    // add the ul to the form 
    obj.parentNode.appendChild(ul); 
}

你可能会想我们可以通过添加另一个循环考虑到这一点，我们创建 <li>来注视选定<option>前，然后在为了存储价值class我们选择<li>为“选择”：

… 
    var opts = obj.options; 
    // check for the selected option (default to the first option) 
    for (var i=0; i<opts.length; i++) { 
    var selectedOpt; 
    if (opts[i].selected) { 
     selectedOpt = i; 
     break; // we found the selected option, leave the loop 
    } else { 
     selectedOpt = 0; 
    } 
    } 
    for (var i=0; i<opts.length; i++) { 
    var li = document.createElement('li'); 
    var txt = document.createTextNode(opts[i].text); 
    li.appendChild(txt); 
    if (i == selectedOpt) { 
     li.className = 'selected'; 
    } 
    ul.appendChild(li); 
…

[注：从这里开始，将选择选项5，以演示此功能的功能。]

现在，我们可以运行在每个<select>在页面上该功能（在本例中，一个）与下列内容：

function setForm() { 
    var s = document.getElementsByTagName('select'); 
    for (var i=0; i<s.length; i++) { 
    selectReplacement(s[i]); 
    } 
} 
window.onload = function() { 
    setForm(); 
}

我们几乎没有;让我们添加一些风格。

一些聪明的CSS

我不知道你，但我的CSS的下拉列表中的一个巨大的风扇（尤其是 Suckerfish品种）。我一直在与他们合作一段时间，现在终于明白了， <select>几乎就像一个下拉菜单，虽然有一点发生在引擎盖下。为什么不把相同的文体理论应用于我们的仿制品-<select>？基本风格是这样的：

ul.selectReplacement { 
    margin: 0; 
    padding: 0; 
    height: 1.65em; 
    width: 300px; 
} 
ul.selectReplacement li { 
    background: #cf5a5a; 
    color: #fff; 
    cursor: pointer; 
    display: none; 
    font-size: 11px; 
    line-height: 1.7em; 
    list-style: none; 
    margin: 0; 
    padding: 1px 12px; 
    width: 276px; 
} 
ul.selectOpen li { 
    display: block; 
} 
ul.selectOpen li:hover { 
    background: #9e0000; 
    color: #fff; 
}

现在，处理“选择”列表项，我们需要得到一点狡猾：我们不使用

ul.selectOpen li { 
    display: block; 
} 
ul.selectReplacement li.selected { 
    color: #fff; 
    display: block; 
} 
ul.selectOpen li.selected { 
    background: #9e0000; 
    display: block; 
} 
ul.selectOpen li:hover, 
ul.selectOpen li.selected:hover { 
    background: #9e0000; 
    color: #fff; 
}

注意：悬停伪类为<ul>使其开放，而不是我们的class - 它作为“selectOpen”。原因是双重：

CSS是用于演示，而不是行为;和
我们希望我们的人造表现得像真正的<select>，我们需要列表在onclick事件中打开，而不是简单的鼠标悬停。

要实现这一点，我们可以采取什么样的，我们从口鱼教训，通过动态分配和动态onclick`事件删除此class在 ``的onclick events for the list items. To do this right, we will need the ability to change the每个列表项将其应用到我们自己的JavaScript切换以下两个动作之间：

显示完整faux- <select>当点击列表中倒塌选定/默认选项时;和
“选择”它被点击时的列表项&折叠人造。

我们将创建一个名为selectMe()处理的再分配功能的“选择” class，则onclick事件列表项目，以及faux- <select>的倒塌的重新分配：

由于最初的Suckerfish告诉我们，IE不会识别之外的任何东西，因此除了<a>之外，我们需要通过增加来增加我们从中学到的一些代码。我们可以onmouseover和附加的onmouseout事件到 “selectReplacement” class -ed <ul>及其 <li> S：

function selectReplacement(obj) { 
    … 
    // create list for styling 
    var ul = document.createElement('ul'); 
    ul.className = 'selectReplacement'; 
    if (window.attachEvent) { 
    ul.onmouseover = function() { 
     ul.className += ' selHover'; 
    } 
    ul.onmouseout = function() { 
     ul.className = 
     ul.className.replace(new RegExp(" selHover\\b"), ''); 
    } 
    } 
    … 
    for (var i=0; i<opts.length; i++) { 
    … 
    if (i == selectedOpt) { 
     li.className = 'selected'; 
    } 
    if (window.attachEvent) { 
     li.onmouseover = function() { 
     this.className += ' selHover'; 
     } 
     li.onmouseout = function() { 
     this.className = 
      this.className.replace(new RegExp(" selHover\\b"), ''); 
     } 
    } 
    ul.appendChild(li); 
}

然后，我们可以修改一些选择在CSS，处理悬停于IE：

ul.selectReplacement:hover li, 
ul.selectOpen li { 
    display: block; 
} 
ul.selectReplacement li.selected { 
    color: #fff; 
    display: block; 
} 
ul.selectReplacement:hover li.selected**, 
ul.selectOpen li.selected** { 
    background: #9e0000; 
    display: block; 
} 
ul.selectReplacement li:hover, 
ul.selectReplacement li.selectOpen, 
ul.selectReplacement li.selected:hover { 
    background: #9e0000; 
    color: #fff; 
    cursor: pointer; 
}

现在我们有一个列表，其行为如同<select>;但我们仍然需要一种方法来更改所选列表项并更新关联表单元素的值。

的JavaScript福

我们已经有一个“选择” class我们可以应用到我们选择的列表项，但我们需要一种方式去了解它被点击当它应用到一个<li>和取出来自任何之前“选择”的兄弟姐妹。这里的JS 来实现：

function selectMe(obj) { 
    // get the <li>'s siblings 
    var lis = obj.parentNode.getElementsByTagName('li'); 
    // loop through 
    for (var i=0; i<lis.length; i++) { 
    // not the selected <li>, remove selected class 
    if (lis[i] != obj) { 
     lis[i].className=''; 
    } else { // our selected <li>, add selected class 
     lis[i].className='selected'; 
    } 
    } 
}

[注：我们可以用简单的className分配和排空，因为我们是在<li> S的完全控制。如果你（出于某种原因）需要分配其他的类列表项，我建议修改代码以追加和删除“选择”类的className财产。]

最后，我们添加了一个小功能设置原稿<select> （这将连同形式提交）的值被点击的<li>时：

function setVal(objID, selIndex) { 
    var obj = document.getElementById(objID); 
    obj.selectedIndex = selIndex; 
}

然后，我们可以添加这些功能为onclick事件我们<li> S的：

… 
    for (var i=0; i<opts.length; i++) { 
    var li = document.createElement('li'); 
    var txt = document.createTextNode(opts[i].text); 
    li.appendChild(txt); 
    li.selIndex = opts[i].index; 
    li.selectID = obj.id; 
    li.onclick = function() { 
     setVal(this.selectID, this.selIndex); 
     selectMe(this); 
    } 
    if (i == selectedOpt) { 
     li.className = 'selected'; 
    } 
    ul.appendChild(li); 
    } 
…

你有它。我们已经创建了功能faux- . As we have not hidden the originalyet, we can [watch how it behaves](files/4.html) as we choose different options from our faux-. Of course, in the final version, we don't want the original to show, so we can hide it by class`-ING为 “更换”，并称是给JS这里：

function selectReplacement(obj) { 
    // append a class to the select 
    obj.className += ' replaced'; 
    // create list for styling 
    var ul = document.createElement('ul'); 
…

然后，添加一个新的CSS规则隐藏

select.replaced { 
    display: none; 
}

随着应用几个图像来完成设计（链接不可用），我们很好去！

这是另一个link有人说，它不能做。

来源

2008-12-19 03:58:42 some

+0

这个答案的第一个环节是死的（404）。 – mydoghasworms 2011-05-31 07:34:45

+11

@mydoghasworms：我非常抱歉，2½年前的答案中的链接不再工作。您仍然可以通过以下网址访问该页面：http://web.archive.org/web/20090922234755/http://v2.easy-designs.net/articles/replaceSelect/ – some 2011-05-31 16:27:21

+0

更有用的是将内容从这些内容中提取出来链接，因为链接腐烂确实发生！ http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers – rlemon 2012-06-19 12:31:33

1

您需要一个带有CSS和JavaScript的自定义设计选择框。如果用户禁用了JavaScript，您需要确保它完全降级到标准选择元素。

IMO，这只是不值得的努力。选择内置字体样式以使其接近您的网站设计;离开边界等，到框元素。

来源

2008-12-19 04:02:14 cLFlaVA

2

仅使用css是不容许的。事实上，所有的表单元素都无法自定义，只能在所有浏览器上用css进行查看。虽然你可以尝试niceforms）

来源

2008-12-19 20:47:05

5

从我个人的经验，当我们试图把边界红色，当一个无效的条目被选中时，不可能在IE中选择元素的边框红色。

如前所述，Internet Explorer中的ocntrols使用WindowsAPI进行绘制和渲染，并且您无需解决此问题。

我们的解决方案是将选择元素的背景颜色变为红色（让文本可读）。背景颜色在每个浏览器中都有效，但在IE中我们有一个副作用，那就是与选择的背景颜色相同的元素。

所以总结我们的推杆解决方案：

select 
{ 
    background-color:light-red; 
    border: 2px solid red; 
} 
option 
{ 
    background-color:white; 
}

注意，颜色设置与十六进制代码，我只是不记得哪。

这个解决方案为我们提供了除IE边框红色外的所有浏览器的通缉效果。

好运

来源

2008-12-19 21:11:29

2

看看这个代码...希望乌尔快乐:)

<!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=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
<style type="text/css"> 
*{margin:0;padding:0;} 
select {font: normal 13px Arial, SansSerif, Verdana; color: black;} 
.wrapper{width:198px; position: relative; height: 20px; overflow: hidden; border-top:1px solid #dddddd; border-left:1px solid #dddddd;} 
.Select{color: black; background: #fff;position: absolute; width: 200px; top: -2px; left: -2px;} 
optgroup{background-color:#0099CC;color:#ffffff;} 
</style> 
</head> 

<body> 
<div class="wrapper"> 
<select class="Select"> 
<optgroup label="WebDevelopment"></optgroup> 
<option>ASP</option> 
<option>PHP</option> 
<option>ColdFusion</option> 
<optgroup label="Web Design"></optgroup> 
<option>Adobe Photoshop</option> 
<option>DreamWeaver</option> 
<option>CSS</option> 
<option>Adobe Flash</option> 
</select> 
</div> 
</body> 
</html>

Sajay

来源

2009-06-16 13:11:35

2

IE < 8不会呈现下拉列表本身它只是使用Windows控制这不能用这种方式来设计。从IE 8开始，这改变了，现在应用了样式。当然，它的市场份额还是微不足道的。

来源

2009-06-16 13:15:58 User

2

我周围的工作不能把一个边界上的选择在IE7（IE8在兼容模式下）

给予它的边界为逢作为填充物，它看起来像是....

不是万能的，但它的开始......

来源

2009-06-16 14:52:28

1

它解决了我的，我的目的：

.select-container { 
    position:relative; 
    width:200px; 
    height:18px; 
    overflow:hidden; 
    border:1px solid white !important 
} 
.select-container select { 
    position:relative; 
    left:-2px; 
    top:-2px 
}

把更多的风格将需要使用嵌套的div。

来源

2010-02-27 18:08:23

1

沿在IE中选择的一侧做一个边框使用IE浏览器的过滤器：

select.required { 左边框：2px的固体红; 过滤器：进程id：DXImageTransform.Microsoft.dropshadow（OffX = -2，OffY = 0，颜色=＃FF0000） }

我把边境一侧只有我的需要的状态所有输入。

有可能是，对于一个全方位的边界做的更好的效果...

http://msdn.microsoft.com/en-us/library/ms532853(v=VS.85).aspx

来源

2010-05-18 22:11:46

23

外推吧！:)

filter: 
    progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,color=#FF0000) 
    progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,color=#FF0000) 
    progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1,color=#FF0000) 
    progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1,color=#FF0000);

来源

2010-07-16 14:38:28 nemoluca

1

html标签之前只需添加一个doctype声明

例：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

它是在JSP文件要去工作为好。欲了解更多信息： HTML Doctype Declaration

来源

2011-01-16 22:10:38

1

它的工作原理！使用下面的代码：

<style> 
div.select-container{ 
    border: 1px black;width:200px; 
} 
</style> 


<div id="status" class="select-container"> 
    <select name="status"> 
     <option value="" >Please Select...</option> 
     <option value="option1">Option 1</option> 
     <option value="option2">Option 2</option> 
    </select> 
</div>

来源

2011-03-09 16:38:53

5

我是有即同样的问题，然后我插入这个元标记，它让我编辑的边框即

<meta http-equiv="X-UA-Compatible" content="IE=100" >

来源

2011-04-05 23:40:38 nick

2

的边框样式属性一个简短的命令来定义html元素的所有边的边框样式。每一面都可以有不同的风格。

http://www.handycss.com/tips/styling-borders-with-css/

来源

2012-05-09 08:09:43

选定元素上的IE6/IE7 css边框

回答

编辑：链路断开时，我倾倒内容

`<select>`新的东西，1

部分由亚伦·古斯塔夫森

的问题

的`<select>`

解决方案

构建列表

一些聪明的CSS

的JavaScript福

选定元素上的IE6/IE7 css边框

回答

编辑：链路断开时，我倾倒内容

<select>新的东西，1

部分由亚伦·古斯塔夫森

的问题

的<select>

解决方案

构建列表

一些聪明的CSS

的JavaScript福

相关问题

`<select>`新的东西，1

的`<select>`