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

2024-02-16

有谁有使用 CSS 来设置 Internet Explorer 中“选择”元素边框样式的解决方案吗？

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

这里有一个link http://v2.easy-designs.net/articles/replaceSelect/控件被替换的地方，但我不知道这是否是你想要做的。

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

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

亚伦·古斯塔夫森

现在您已经利用最新和最先进的技术构建了一个美观且符合标准的网站最伟大的 CSS 技术。您已经掌握了对每个元素的样式的控制，但是在你的内心深处，有一个小声音在唠叨你，你的脸有多丑<select>是。好吧，今天我们要探索一种方法来消除这种声音声音很小，真正完成我们的设计。通过一些 DOM 脚本和一些创意CSS，你也可以制作你的<select>很漂亮……但你不会必须牺牲可访问性、可用性或优雅的降级。

问题

我们都知道<select>实在是太丑了。事实上，许多人试图限制其用于避免 1994 年左右的经典网页嵌入边框。我们不应该回避使用<select>不过——它是当前形式的重要组成部分工具集；我们应该拥抱它。也就是说，一些创造性思维可以提高它。

The `<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>s 内<select>. This <select>有一个唯一分配的id东西。”取决于浏览器/平台你正在观看它，你的<select>可能看起来大致是这样的：

_{(source: easy-designs.net http://v2.easy-designs.net/articles/replaceSelect/images/ffSelect.png)}

or this

_{(source: easy-designs.net http://v2.easy-designs.net/articles/replaceSelect/images/safariSelect.png)}

假设我们想让它看起来更现代一点，也许像这样：

_{(source: easy-designs.net http://v2.easy-designs.net/articles/replaceSelect/images/desiredSelect.png)}

那么我们该怎么做呢？保持基本的<select>不是一个选择。除了基本的背景颜色、字体和颜色调整，你真的没有对的大量控制。

然而，我们可以模仿一个卓越的功能<select>以新的形式控制而不牺牲语义、可用性或可访问性。为了为此，我们需要检查<select>.

A <select>本质上是一个无序列表的选择，您可以在其中选择一个值与表单的其余部分一起提交。所以，本质上，它是<ul>使用类固醇。继续这个思路，我们可以更换<select>对于无序列表，只要我们给它一些增强的功能。作为<ul>s 可以有多种不同的风格怎么样，我们几乎可以回家了。现在的问题变成了“如何确保我们维持功能<select>当使用一个<ul>？“ 其他换句话说，如果我们不再使用表单控件？

解决方案

输入 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 下拉菜单的超级粉丝（尤其是吸盘鱼 http://htmldog.com/articles/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>做到这一点开放，相反我们是class- 将其设置为“selectOpen”。原因是双重：

CSS是为了表现，而不是行为；和
我们想要我们的假-<select>表现得像一个真实的人<select>，我们需要在中打开列表onclick事件而不是简单的鼠标悬停。

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

显示完整的假<select>当列表折叠时单击选定/默认选项时；和
单击时“选择”列表项并折叠人造列表项<select>.

我们将创建一个名为selectMe()处理重新分配 “选定的”class，重新分配onclick列表的事件物品以及人造物品的倒塌<select>:

正如最初的 Suckerfish 告诉我们的那样，IE 不会识别悬停状态除了一个<a>，所以我们需要通过增加来解释这一点我们的一些代码以及我们从他们那里学到的东西。我们可以在鼠标悬停时附加并 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);
  }
…

你有它。我们创造了我们的功能性人造物. 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 by将其归类为“已替换”，并添加给这里的 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 http://csscreator.com/node/25166对于那些说这不可能完成的人。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)