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

Question

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

Answer 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”。这样做的原因是 双重：

1. CSS 用于展示，而不是行为；和
2. 我们希望我们的假<select> 表现得像真正的<select>，我们需要在onclick 事件中打开列表，而不是在简单的鼠标悬停时打开。

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

1. 在列表折叠时单击选定/默认选项时显示完整的假<select>；和
2. “选择”一个列表项，当它被点击并折叠虚假-<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 original to 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，有人说不能这样做。

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中不可能将Select Element的边框红色放在。

如前所述，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" >

Answer 5

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

Answer 6

IE

Answer 7

我已经解决了无法在 IE7（兼容模式下的 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>

萨杰

Answer 9

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

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

Answer 10

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

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

Answer 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

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 Declaration

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。