IE6 / IE7 CSSselect元素边框

有没有人有一个解决scheme样式的使用CSS的Internet Explorer中的“select”元素的边界？

Answer 1

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

这里是控制被replace的链接 ，但我不知道你是否想要做什么。

编辑：链接被打破我正在倾销的内容

<select> Something New，Part 1

通过Aaron Gustafson

所以你已经build立了一个美丽，符合标准的网站利用最新和最好的CSS技术。 你已经掌握了每一个元素的造型，但是在你的脑海里，有一点声音在唠叨着你的<select>是多么丑陋。 那么今天我们要探索一种沉默的方式，真正完成我们的devise。 通过一个小小的DOM脚本和一些有创意的CSS，你也可以让你的<select>漂亮…而且你不必牺牲可访问性，可用性或优雅的降级。

问题

我们都知道<select>只是简单的丑陋。 事实上，许多人试图限制它的使用，以避免它的经典networking大约在1994年的插图边界。 尽pipe我们不应该避免使用<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> 。 这个<select>具有唯一的“something”的id 。 根据您查看的浏览器/平台，您的<select>可能看起来大致如下所示：

在Windows XP / Firefox 1.0.2中呈现的<select>。 http://v2.easy-designs.net/articles/replaceSelecthttp://img.dovov.comffSelect.png

或这个

在Mac OSX / Safari 1.2中呈现的<select>。 http://v2.easy-designs.net/articles/replaceSelecthttp://img.dovov.comsafariSelect.png

比方说，我们想让它看起来更现代一点，也许就像这样：

我们的一个很好的风格的<select>的概念。 http://v2.easy-designs.net/articles/replaceSelecthttp://img.dovov.comdesiredSelect.png

那我们该怎么做呢？ 保持基本的<select>不是一个选项。 除了基本的背景颜色，字体和颜色的调整，你并没有太多的控制权。

但是，我们可以在不牺牲语义，可用性或可访问性的情况下，在新的表单控件中模仿<select>的超级function。 为了做到这一点，我们需要检查一个<select>的性质。

实质上， <select>是一个无序的选项列表，您可以在其中select一个值与表单的其余部分一起提交。 所以，从本质上讲，这是一个类固醇的<ul> 。 继续这一思路，我们可以用无序列表来replace<select> ，只要我们给它一些增强的function即可。 由于<ul>可以以各种不同的方式进行devise，所以我们几乎可以免费使用。 现在问题变成了“如何确保在使用<ul>时保持<select>的function？ 换句话说，如果我们不再使用表单控件，那么我们如何提交正确的值和表单？

解决scheme

inputDOM。 这个过程的最后一步是使<ul>函数/感觉像一个<select> ，并且我们可以用JavaScript / ECMA Script和一些聪明的CSS来完成。 这里是我们需要有一个function假的<select>需求的基本列表：

• 点击列表打开它，
• 点击列表项来改变分配的值并closures列表，
• 当没有select任何东西时显示默认值
• 显示select的东西时select的列表项目。

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

build立清单

所以首先我们需要收集所有的属性，然后重build它。 我们通过运行以下JS来完成这个任务：

 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); } 

你可能会想“现在如果有一个选定的<option>会发生什么？ 我们可以通过添加另一个循环来解决这个问题，然后再创build<li> s来查找所选的<option> ，然后存储该值以便将所选的<li>为“selected”：

 … 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); … 

[注意：从这里开始，将select选项5来演示此function。]

现在，我们可以在页面上的每个<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; } 

请注意，我们没有使用：hover伪类来使<ul>打开，而是将其命名为“selectOpen”。 其原因有两方面：

1. CSS是为了演示，而不是行为; 和
2. 我们希望我们的人造<select>行为像一个真正的<select> ，我们需要在onclick事件中打开列表，而不是简单的鼠标hover。

为了实现这一点，我们可以把我们从Suckerfish中学到的东西应用到我们自己的JavaScript中events for the list items. To do this right, we will need the ability to change the onclick events for the list items. To do this right, we will need the ability to change thedynamic地分配和删除这个class events for the list items. To do this right, we will need the ability to change the events for the list items. To do this right, we will need the ability to change the每个列表项events for the list items. To do this right, we will need the ability to change the onclick事件，以便在以下两个操作之间切换：

1. 在列表折叠时单击选定/默认选项时显示完整的虚假<select> ; 和
2. 单击时select一个列表项目并折叠人造<select> 。

我们将创build一个名为selectMe()的函数来处理“selected” class重新分配，为列表项目重新分配onclick事件，以及折叠人造<select> ：

正如Suckerfish原来教我们的那样，除了<a>之外，IE不会识别hover状态，所以我们需要通过将我们的一些代码与我们从中学到的东西进行扩充来解释。 我们可以将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中修改几个select器，来处理IE的hover：

 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>一样的<select> ; 但是我们仍然需要改变select的列表项并更新相关表单元素的值。

JavaScript fu

我们已经有了一个“select” class我们可以将其应用到我们select的列表项目中，但是我们需要一种方法将它应用到<li>当它被点击并从任何之前“select”的同胞中删除。 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> 。 如果你（出于某种原因）需要分配额外的类到你的列表项，我build议修改代码来追加和删除“选定”类到你的className属性。

最后，当单击<li>时，我们添加一个小函数来设置原始<select> （将与表单一起提交）的值：

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

然后，我们可以将这些函数添加到我们的<li> s的onclick事件中：

 … 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); } … 

你有它。 我们已经创build了我们的function性人造. As we have not hidden the original . As we have not hidden the original yet, 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 . Of course, in the final version, we don't want the original to show, so we can hide it by为“replace”，将其添加到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; } 

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

---

这是另一个人说的不能完成的链接。

Answer 2

推断它！ 🙂

  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); 

Answer 3

从我个人的经验来看，当我们试图把边界设置为红色时，如果select了无效的条目，就不可能在IE中select元素的边框红色。

如前所述，在IE浏览器中使用WindowsAPI绘制和渲染，你没有什么可以解决这个问题。

我们的解决scheme是将select元素的背景颜色变成红色（使文本可读）。 背景颜色是在每个浏览器工作，但在IE中，我们有一个副作用，即在select相同的背景颜色的元素。

所以总结一下我们提出的解决scheme：

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

请注意，颜色是用hex代码设置的，我只是不记得哪个。

除了IE中的边框红色外，这个解决scheme在每个浏览器中都给了我们想要的效果。

祝你好运

Answer 4

我与ie有这个相同的问题，然后我插入这个元标记，它允许我编辑ie中的边界

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

Answer 5

只使用CSS是不可能的。 事实上，所有的表单元素都不可能自定义，只能用css在所有浏览器上以相同的方式查看。 尽pipe你可以尝试niceforms ;）

Answer 6

IE <8不会渲染下拉列表本身，它只是使用不能用这种方式devise的窗口控件。 从IE 8开始，这已经改变，现在应用了样式。 当然，它的市场份额还是可以忽略不计的。

Answer 7

我已经解决了无法在IE7中select边框（兼容模式下的IE8）

通过给它一个边框和填充，它看起来像东西….

不是一切，但是它开始了…

Answer 8

看看这个代码…希望你快乐:)

 <!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

Answer 9

border-style属性是一个简短的命令，用于定义html元素的所有边的边框样式。 每一边都可以有不同的风格。

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

Answer 10

你需要一个定制的CSS和JavaScriptselect框。 如果用户禁用JavaScript，则需要确保完全降级到标准select元素。

国际海事组织，这是不值得的努力。 坚持与select的字体样式，使其接近您的网站的devise; 离开边界等，到框元素。

Answer 11

要在IE中select一边的边框，使用IE的filter：

select.required {border-left：2px纯红色; filter：progid：DXImageTransform.Microsoft.dropshadow（OffX = -2，OffY = 0，color =＃FF0000）}

我只在所有input的一边放置了一个边框以获得所需的状态。

有可能是一个更好的全面边界的影响…

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

Answer 12

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

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

它也将在JSP文件中工作。 更多信息： HTML Doctype声明

Answer 13

有用！！！ 使用下面的代码：

 <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> 

Answer 14

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

 .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。