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

Question

有没有人使用CSS在Internet Explorer中为“选择”元素的边框设置样式的解决方案？

Answer 1

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

这是一个替换控件的link，但是我不知道这就是您要执行的操作。

编辑:链接已断开，我正在转储内容
<select>新内容，第1部分

亚伦·古斯塔夫森(Aaron Gustafson)

因此，您已经利用最新的，
最伟大的CSS技术。您已经掌握了控制每个元素样式的控制，但是
在你的内心深处，一个小声音在困扰着你<select>是。好吧，今天我们将探索一种使之静音的方法
声音很小，真正完成了我们的设计。加上一些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>在完整的上下文中
形成。]

因此，我们在 <option>中有五个 <select>。此 <select>具有一个
唯一分配的“内容”的 id。取决于浏览器/平台
您正在查看它，您的 <select>可能大致如下所示:


(来源: easy-designs.net)

或这个


(来源: easy-designs.net)

假设我们想使它看起来更现代，也许像这样:


(来源: easy-designs.net)

那么我们该怎么做呢？保留基本的 <select>是不可行的。除了
基本的背景颜色，字体和颜色调整，您实际上并没有
对...有很多控制。

但是，我们可以采用新形式模仿 <select>的出色功能
控制而不牺牲语义，可用性或可访问性。为了
为此，我们需要检查 <select>的性质。
<select>本质上是一个无序选择列表，您可以在其中选择
选择一个值与表格的其余部分一起提交。因此，本质上，
这是类固醇的 <ul>。继续这种思路，我们可以
只要我们给它一些一些，就用一个无序列表替换 <select>增强功能。由于 <ul>的样式可以多种多样
方式上，我们几乎无家可归。现在的问题变成了“如何确保我们
在使用 <select>时维护 <ul>的功能吗？“在其他
的话，如果我们将如何与表格一起提交正确的值
不再使用表单控件？

解决方案

输入DOM。该过程的最后一步是制作 <ul>函数/感觉就像 <select>，我们可以用
JavaScript / ECMA脚本和一些聪明的CSS。这是
要求，我们需要有一个功能人造 <select>:

单击列表以打开它，

单击列表项以更改分配的值并关闭列表

当未选择任何内容时，

显示默认值，

在选定某项时显示选定的列表项。

有了这个计划，我们可以开始逐步解决每个部分。

建立 list

因此，首先我们需要收集所有属性，并从
并将其重建为。我们通过运行以下命令来完成此任务
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编码为“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);
…

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

现在，我们可以在页面上的每个 <li>上运行此函数(在我们的示例中，
一)具有以下内容:

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

注意，我们没有使用 <select>的:hover伪类来实现它
打开，而是使用 <ul>-将其命名为“selectOpen”。原因是
双重:

CSS仅用于演示，不用于行为；和

我们希望我们的人造class表现得像真实的<select>一样，我们需要在<select>事件中打开列表，而不是简单地将鼠标悬停在上面。

为此，我们可以借鉴从Suckerfish中学到的知识并将其应用于
我们自己的JavaScript，方法是动态分配和删除此 onclick即时切换每个列表项的onclick class onclick`事件
在以下两个 Action 之间:

列表折叠时，单击“selected / default”选项时，

显示完整的人造events for the list items. To do this right, we will need the
ability to change the。和

单击列表项时“选择”它并折叠该人造<select>。

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

正如原始的Suckerfish教给我们的那样，IE不会识别以下内容的悬停状态:
除了 <select>之外的任何东西，所以我们需要通过增加来解决这个问题
我们的一些代码以及从他们那里学到的东西。我们可以附加onmouseover和
onmouseout事件传递给“selectReplacement” <a> -ed class及其 <ul> 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;
}

现在我们有了一个像 <li>的列表；但是我们仍然
需要一种方法来更改所选列表项并更新
关联的表单元素。

JavaScript福

我们已经有一个“选定的” <select>，可以应用于选定的列表项，
但是我们需要一种方法，当点击它时将其应用于 class并将其从其先前“选定”的任何同级中删除。这是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';
    }
  }
}

[注意:我们可以使用简单的 <li>分配和清空，因为我们在
完全控制 className。如果您(出于某种原因)需要分配
列表项中的其他类，我建议将代码修改为
向您的 <li>属性添加并删除“选定的”类。]

最后，我们添加一个小函数来设置原始 className的值
(将与表单一起提交)，当点击 <select>时:

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

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

你有它。我们已经创建了功能性的人造 <li> . 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
类`-将其替换为“replaced”，然后添加
这里的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。