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

Question

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

Answer 1

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

这是一个替换控件的链接,但我不知道那是不是你想做什么.

编辑:链接坏了我正在转储内容

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

A <select>本质上是一个无序的选择列表,您可以在其中选择单个值以及表单的其余部分.所以,从本质上讲,它是一种<ul>类固醇.继续这种思路,我们可以用<select>无序列表替换它,只要我们给它一些增强的功能.由于<ul>s可以用多种不同的方式设计,我们几乎可以免费回家.现在问题变成"如何确保我们保持<select>使用时的功能<ul>？" 换句话说,如果我们不再使用表单控件,我们如何提交正确的值以及表单？

解决方案

输入DOM.这个过程的最后一步是使<ul> 函数/感觉像一个<select>,我们可以用JavaScript/ECMA Script和一些聪明的CSS来实现.以下是我们需要的功能性虚拟要求的基本列表<select>:

• 点击列表打开它,
• 单击列表项以更改分配的值并关闭列表,
• 显示未选择任何内容时的默认值,和
• 选择某些内容时显示所选列表项.

通过这个计划,我们可以开始连续处理每个部分.

建立清单

所以首先我们需要收集所有属性并将其重建为a.我们通过运行以下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>"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,以演示此功能.]

现在,我们可以<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品种).我已经和他们一起工作了一段时间了,最​​后我突然意识到a <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".原因有两方面:

1. CSS用于表示,而不是行为; 和
2. 我们希望我们的虚假<select>行为像真实一样<select>,我们需要列表在onclick事件中打开而不是简单的鼠标悬停.

为了实现这一点,我们可以从Suckerfish中学到并将它应用到我们自己的JavaScript中,方法是动态地为每个列表项的class`onclick events for the list items. To do this right, we will need the ability to change theonclick`事件分配和删除它,以便在以下两个动作之间切换:

1. <select>在列表折叠时单击选中/默认选项时显示完整的虚假信息; 和
2. 单击列表项时"选择"列表项并折叠虚假项目<select>.

我们将创建一个函数调用selectMe()来处理"选定"的class重新分配,重新分配onclick列表项的事件,以及折叠虚假 - <select>:

正如最初的Suckerfish告诉我们的那样,IE不会在除了a之外的任何事物上识别出悬停状态<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 fu

我们已经有一个"已选中" 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.如果您(由于某种原因)需要为列表项分配其他类,我建议修改要附加的代码并将"selected"类移除到您的className属性.

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

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

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

…
  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 original to 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;
}

通过应用一些图像来完成设计(链接不可用),我们很高兴!

这里有另一个链接到某人说它无法完成.

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

根据我个人的经验,当我们选择无效条目时我们尝试将边框设置为红色时,不可能在IE中添加选择元素的边框红色.

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

我们的解决方案是将选择元素的背景颜色设置为红色(使文本可读).背景颜色在每个浏览器中工作,但在IE中我们有一个副作用,即元素与选择相同的背景颜色.

总结我们推出的解决方案:

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

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

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

祝好运

Answer 4

我有同样的问题ie,然后我插入这个元标记,它允许我编辑ie中的边框

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