选择元素上的 IE6/IE7 CSS 边框

Posted 2023-03-06

技术标签:

【中文标题】选择元素上的 IE6/IE7 CSS 边框【英文标题】：IE6/IE7 css border on select element 【发布时间】：2010-09-27 15:49:57 【问题描述】：

有没有人可以使用 CSS 为 Internet Explorer 中“选择”元素的边框设置样式？

【问题讨论】：

你可以只用一个 div 包裹 select 标签，然后把边框放在那个 div 上 【参考方案1】：

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

这里是一个link 控件被替换的地方，但我不知道这是否是你想要做的。

编辑：链接已损坏我正在转储内容

`<select>` 新事物，第 1 部分

亚伦·古斯塔夫森

因此，您已经利用最新和最伟大的 CSS 技术。您已经掌握了对每个元素的样式的控制，但是在你的脑海里，一个小声音在唠叨你有多丑 <select>s 是。好吧，今天我们将探索一种方法来消除它声音很小，真正完成我们的设计。用一点 DOM 脚本和一些有创意的 CSS，你也可以让你的 <select>s 漂亮……你不会必须牺牲可访问性、可用性或优雅降级。

问题

我们都知道<select> 实在是太丑了。事实上，许多人试图限制其用于避免其经典的 web 大约 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>s。这个<select> 有一个唯一分配“某物”的id。取决于浏览器/平台您正在查看它，您的<select> 可能大致如下：

_{（来源：easy-designs.net）}

或者这个

_{（来源：easy-designs.net）}

假设我们想让它看起来更现代一点，可能是这样的：

_{（来源：easy-designs.net）}

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

但是，我们可以以新的形式模仿 <select> 的卓越功能在不牺牲语义、可用性或可访问性的情况下进行控制。为了这样做，我们需要检查<select> 的性质。

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

解决方案

进入 DOM。该过程的最后一步是制作<ul> 功能/感觉就像<select>，我们可以通过 javascript/ECMA 脚本和一点聪明的 CSS。以下是基本清单要求我们需要有一个功能性的假<select>：

点击列表打开，单击列表项以更改分配的值并关闭列表，在未选择任何内容时显示默认值，并且选择某项时显示所选列表项。

有了这个计划，我们就可以开始依次处理每个部分了。

构建列表

所以首先我们需要收集所有的属性和 s 并将其重建为 .我们通过运行以下命令来完成此操作 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> 已经？”我们可以通过在创建之前添加另一个循环来解决这个问题 <li>s 查找选定的<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> 的 :hover 伪类来实现它打开，而不是我们将class-ing 为“selectOpen”。这样做的原因是双重：

<select>

onclick

为了实现这一点，我们可以将我们从 Suckerfish 中学到的知识应用到我们自己的 JavaScript 通过动态分配和删除这个class in `onclickevents for the list items. To do this right, we will need the ability to change theonclick` 事件为每个列表项动态切换在以下两个动作之间：

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

然后我们可以将这些函数添加到 <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);
  
…

你有它。我们已经创建了我们的功能假-. 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 originalto show, so we can hide it byclass`-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，有人说不能这样做。

【讨论】：

此答案中的第一个链接已失效 (404)。 @mydoghasworms：非常抱歉，2.5 年前的答案中的链接不再有效。您仍然可以通过以下方式访问该页面：web.archive.org/web/20090922234755/http://v2.easy-designs.net/… 从这些链接中提取内容可能更有帮助，因为确实会发生链接腐烂！ meta.stackexchange.com/questions/8231/… @rlemon 我同意这在许多情况下可能会有所帮助，但复制和粘贴整篇文章也可能侵犯版权。在这种情况下，我的答案不言自明without the link。该网站确实发布了“除非另有说明，否则本网站已根据知识共享许可证获得许可。”它被引用回原作者。我认为在这种情况下，将带有他的名字的内容转储到这里实际上对他来说比被困在一些回路机器中更有帮助:)【参考方案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);

【讨论】：

这是我在 IE7 及更低版本中所做的一个很好的替代方案，它在元素周围使用包装器 div。而在 IE8+ 中，我可以只使用更标准的 outline 属性。我最近意识到，当第二次应用过滤器时，该项目不再可见。出于验证目的，我用红色勾勒出来。如果验证再次触发，我概述的项目就消失了。仍然很棒的解决方案，但回到我的绘图板上。【参考方案3】：

从我的个人体验中选择了在选择无效条目时将边框红色放置在哪里，在IE中不可能将Select Element的边框红色放在。

如前所述，Internet Explorer 中的 ocntrols 使用 WindowsAPI 进行绘制和渲染，您没有什么可以解决的。

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

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

select

  background-color:light-red;
  border: 2px solid red;

option

  background-color:white;

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

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

祝你好运

【讨论】：

与此类似，您只需将选择标签包装在带有边框的 div 中即可。【参考方案4】：

我在使用 ie 时遇到了同样的问题，然后我插入了这个元标记，它允许我在 ie 中编辑边框

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

【讨论】：

【参考方案5】：

仅使用 css 是不可能的。事实上，仅使用 css 无法自定义所有表单元素以在所有浏览器上以相同的方式查看。你可以试试niceforms ;)

【讨论】：

嘿，这看起来不错 - 你有没有在任何网站上实现过这个？我试过一次，但我不喜欢它，所以我写了自己的脚本：P 不错的链接，谢谢。但是（不足为奇）：“该脚本完全兼容，并且已经在大多数主流浏览器上进行了测试，除了 IE6。” @Daniel：IE6 是 10 年前的浏览器。你不想让它安息吗？ :) 除此之外：dowebsitesneedtolookexactlythesameineverybrowser.com ;) 不要误会我的意思，我讨厌 IE6（就像所有参与 webdev 的人一样）并同意 100% 的网站不应设计为“像素完美”或预期在每个浏览器中看起来都一样。我只是想指出这一点，因为问题明确指出了 IE6/IE7。【参考方案6】：

【讨论】：

【参考方案7】：

我已经解决了无法在 IE7（兼容模式下的 IE8）中为选择添加边框的问题

通过给它一个边框和一个填充，它看起来像什么......

不是一切，但它的开始......

【讨论】：

【参考方案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;
.wrapperwidth:198px; position: relative;  height: 20px; overflow: hidden; border-top:1px solid #dddddd; border-left:1px solid #dddddd;
.Selectcolor: black; background: #fff;position: absolute; width: 200px; top: -2px; left: -2px;
optgroupbackground-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>

萨杰

【讨论】：

【参考方案9】：

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

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

【讨论】：

【参考方案10】：

您需要使用 CSS 和 JavaScript 定制设计的选择框。如果用户禁用了 JavaScript，您需要绝对确保它完全降级为标准选择元素。

IMO，这不值得。坚持选择中的字体样式，使其接近您网站的设计；将边框等留给盒子元素。

【讨论】：

【参考方案11】：

要在 IE 中沿选择的一侧设置边框，请使用 IE 的过滤器：

select.required 左边框：2px 纯红色；过滤器： progid:DXImageTransform.Microsoft.dropshadow(OffX=-2, OffY=0,color=#FF0000)

我只在我所有输入的一侧设置了所需状态的边框。

可能有一种效果可以更好地实现全方位边框......

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

【讨论】：

【参考方案12】：

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

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

它也适用于 JSP 文件。欲了解更多信息： HTML Doctype Declaration

【讨论】：

【参考方案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>

【讨论】：

【参考方案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。

【讨论】：

以上是关于选择元素上的 IE6/IE7 CSS 边框的主要内容，如果未能解决你的问题，请参考以下文章

css hack

IE6/IE7/IE8兼容H5标签

盒模型

IE6IE7IE8及其他浏览器多个元素并排显示

css遗漏

IE6/IE7浏览器不支持display: inline-block;的解决方法