31

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

4

14 回答 14

29

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

这是替换控件的链接，但我不知道这是否是您想要做的。

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

<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>是在完整表格的上下文中。]

所以我们<option>在 a 中有五个 s <select>。这<select>具有唯一分配id的“某物”。根据您正在查看的浏览器/平台，您<select>可能看起来大致如下：

在 Windows XP/Firefox 1.0.2 中呈现的 <select>。
（来源：easy-designs.net）

或这个

在 Mac OSX/Safari 1.2 中呈现的 <select>。
（来源：easy-designs.net）

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

我们对样式精美的 <select> 的概念。
（来源：easy-designs.net）

那么我们该怎么做呢？保持基本<select>不是一种选择。除了基本的背景颜色、字体和颜色调整之外，您对 .

<select>但是，我们可以在不牺牲语义、可用性或可访问性的情况下模仿新表单控件的卓越功能。为了做到这一点，我们需要检查 a 的性质<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 以查找 selected之前添加另一个循环来解决此问题<option>，然后将该值存储为class我们 selected<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 onclick events for the list items. To do this right, we will need the ability to change the”事件中为每个列表项动态分配和删除它，以便在以下两个操作之间切换：

  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>单击它时将其应用到 a 并将其从任何先前“选择”的兄弟姐妹中删除。这是完成此操作的 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属性中。]

最后，我们添加一个小函数来设置单击an时原始值<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;
}

应用几张图片来完成设计（链接不可用），我们很高兴！

这是另一个链接到有人说它无法完成。

于 2008-12-19T03:58:42.433 回答
23

推断它！:)

  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);
于 2010-07-16T14:38:28.893 回答
5

从我的个人体验中，我们在选择无效的条目时，我们尝试将边框红色放置在哪里，因此无法在IE中将边框红色放在IE中。

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

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

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

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

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

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

祝你好运

于 2008-12-19T21:11:29.147 回答
5

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

<meta http-equiv="X-UA-Compatible" content="IE=100" >
于 2011-04-05T23:40:38.120 回答
2

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

于 2008-12-19T20:47:05.873 回答
2

看看这段代码......希望你开心:)

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

萨杰

于 2009-06-16T13:11:35.413 回答
2

IE < 8 不会呈现下拉列表本身，它只是使用无法以这种方式设置样式的 windows 控件。从 IE 8 开始，这种情况发生了变化，现在应用了样式。当然，它的市场份额还微不足道。

于 2009-06-16T13:15:58.290 回答
2

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

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

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

于 2009-06-16T14:52:28.687 回答
2

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

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

于 2012-05-09T08:09:43.467 回答
1

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

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

于 2008-12-19T04:02:14.003 回答
1

出于我的目的，它为我解决了：

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

于 2010-02-27T18:08:23.330 回答
1

要在 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

于 2010-05-18T22:11:46.577 回答
1

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

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

它也可以在 JSP 文件中工作。欲了解更多信息： HTML Doctype 声明

于 2011-01-16T22:10:38.270 回答
1

有用！！！使用以下代码：

<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>
于 2011-03-09T16:38:53.670 回答