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

Question

提问by codegy

Does anyone have a solution for styling the borders of "select" elements in Internet Explorer using CSS?

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

Answer 1

采纳答案by some

As far as I know, it's not possible in IE because it uses the OS component.

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

Here is a linkwhere the control is replaced, but I don't know if thats what you want to do.

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

Edit: The link is broken I'm dumping the content

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

`<select>`Something New, Part 1

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

By Aaron Gustafson

亚伦·古斯塔夫森

So you've built a beautiful, standards-compliant site utilizing the latest and greatest CSS techniques. You've mastered control of styling every element, but in the back of your mind, a little voice is nagging you about how ugly your <select>s are. Well, today we're going to explore a way to silence that little voice and truly complete our designs. With a little DOM scripting and some creative CSS, you too can make your <select>s beautiful… and you won't have to sacrifice accessibility, usability or graceful degradation.

因此，您已经利用最新最好的 CSS 技术构建了一个漂亮的、符合标准的站点。你已经掌握了对每个元素的造型控制，但在你的脑海中，一个小小的声音在唠叨你的<select>s有多丑。好吧，今天我们将探索一种方法来消除那个小小的声音并真正完成我们的设计。通过一些 DOM 脚本和一些创造性的 CSS，您也可以使您的<select>s变得漂亮……而且您不必牺牲可访问性、可用性或优雅的降级。

The Problem

问题

We all know the <select>is just plain ugly. In fact, many try to limit its use to avoid its classic web circa 1994 inset borders. We should not avoid using the <select>though--it is an important part of the current form toolset; we should embrace it. That said, some creative thinking can improve it.

我们都知道这<select>只是简单的丑陋。事实上，许多人试图限制它的使用，以避免其大约 1994 年的经典网页嵌入边框。我们不应该避免使用<select>虽然——它是当前表单工具集的重要组成部分；我们应该拥抱它。也就是说，一些创造性思维可以改善它。

The `<select>`

这 `<select>`

We'll use a simple for our example:

我们将使用一个简单的例子：

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

[Note: It is implied that this <select>is in the context of a complete form.]

[注意：暗示这<select>是在完整表格的上下文中。]

So we have five <option>s within a <select>. This <select>has a uniquely assigned idof "something." Depending on the browser/platform you're viewing it on, your <select>likely looks roughly like this:

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

_{(source: easy-designs.net)}

_{（来源：easy-designs.net）}

or this

或这个

_{(source: easy-designs.net)}

_{（来源：easy-designs.net）}

Let's say we want to make it look a little more modern, perhaps like this:

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

_{(source: easy-designs.net)}

_{（来源：easy-designs.net）}

So how do we do it? Keeping the basic <select>is not an option. Apart from basic background color, font and color adjustments, you don't really have a lot of control over the .

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

However, we can mimic the superb functionality of a <select>in a new form control without sacrificing semantics, usability or accessibility. In order to do that, we need to examine the nature of a <select>.

然而，我们可以<select>在不牺牲语义、可用性或可访问性的情况下，在新的表单控件中模仿 a 的卓越功能。为了做到这一点，我们需要检查 a 的性质<select>。

A <select>is, essentially, an unordered list of choices in which you can choose a single value to submit along with the rest of a form. So, in essence, it's a <ul>on steroids. Continuing with that line of thinking, we can replace the <select>with an unordered list, as long as we give it some enhanced functionality. As <ul>s can be styled in a myriad of different ways, we're almost home free. Now the questions becomes "how to ensure that we maintain the functionality of the <select>when using a <ul>?" In other words, how do we submit the correct value along with the form, if we are no longer using a form control?

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

The solution

解决方案

Enter the DOM. The final step in the process is making the <ul>function/feel like a <select>, and we can accomplish that with JavaScript/ECMA Script and a little clever CSS. Here is the basic list of requirements we need to have a functional faux <select>:

输入 DOM。这个过程的最后一步是让<ul>函数/感觉像一个<select>，我们可以用 JavaScript/ECMA 脚本和一些巧妙的 CSS 来实现。这是我们需要有一个功能性假的基本要求列表<select>：

click the list to open it,
click on list items to change the value assigned & close the list,
show the default value when nothing is selected, and
show the chosen list item when something is selected.

单击列表将其打开，
单击列表项以更改分配的值并关闭列表，
未选择任何内容时显示默认值，以及
选择某些内容时显示所选列表项。

With this plan, we can begin to tackle each part in succession.

有了这个计划，我们就可以开始依次处理每个部分。

Building the list

建立清单

So first we need to collect all of the attributes and s out of the and rebuild it as a . We accomplish this by running the following JS:

所以首先我们需要收集所有的属性和 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);
}

You might be thinking "now what happens if there is a selected <option>already?" We can account for this by adding another loop before we create the <li>s to look for the selected <option>, and then store that value in order to classour selected <li>as "selected":

你可能会想“如果<option>已经有一个被选中的人会发生什么？” 我们可以通过在创建<li>s之前添加另一个循环来解决这个问题以查找 selected <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);
…

[Note: From here on out, option 5 will be selected, to demonstrate this functionality.]

[注意：从现在开始，将选择选项 5，以演示此功能。]

Now, we can run this function on every <select>on the page (in our case, one) with the following:

现在，我们可以<select>在页面上的每个（在我们的例子中，一个）上运行这个函数，如下所示：

function setForm() {
  var s = document.getElementsByTagName('select');
  for (var i=0; i<s.length; i++) {
    selectReplacement(s[i]);
  }
}
window.onload = function() {
  setForm();
}

We are nearly there; let's add some style.

我们快到了；让我们添加一些样式。

Some clever CSS

一些巧妙的 CSS

I don't know about you, but I am a huge fan of CSS dropdowns (especially the Suckerfishvariety). I've been working with them for some time now and it finally dawned on me that a <select>is pretty much like a dropdown menu, albeit with a little more going on under the hood. Why not apply the same stylistic theory to our faux-<select>? The basic style goes something like this:

我不了解您，但我非常喜欢 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;
}

Now, to handle the "selected" list item, we need to get a little craftier:

现在，为了处理“selected”列表项，我们需要变得更狡猾：

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

Notice that we are not using the :hover pseudo-class for the <ul>to make it open, instead we are class-ing it as "selectOpen". The reason for this is two-fold:

请注意，我们没有使用 :hover 伪类来<ul>打开它，而是将class它设为“selectOpen”。这样做的原因有两个：

CSS is for presentation, not behavior; and
we want our faux-<select>behave like a real <select>, we need the list to open in an onclickevent and not on a simple mouse-over.

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

To implement this, we can take what we learned from Suckerfish and apply it to our own JavaScript by dynamically assigning and removing this classin ``onclickevents for the list items. To do this right, we will need the ability to change theonclick` events for each list item on the fly to switch between the following two actions:

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

show the complete faux-<select>when clicking the selected/default option when the list is collapsed; and
"select" a list item when it is clicked & collapse the faux-<select>.

<select>在列表折叠时单击选定/默认选项时显示完整的虚假信息；和
单击时“选择”一个列表项并折叠假 - <select>。

We will create a function called selectMe()to handle the reassignment of the "selected" class, reassignment of the onclickevents for the list items, and the collapsing of the faux-<select>:

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

As the original Suckerfish taught us, IE will not recognize a hover state on anything apart from an <a>, so we need to account for that by augmenting some of our code with what we learned from them. We can attach onmouseover and onmouseout events to the "selectReplacement" class-ed <ul>and its <li>s:

正如最初的 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);
}

Then, we can modify a few selectors in the CSS, to handle the hover for IE:

然后，我们可以修改 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;
}

Now we have a list behaving like a <select>; but we still need a means of changing the selected list item and updating the value of the associated form element.

现在我们有一个列表，其行为类似于<select>; 但是我们仍然需要一种方法来更改所选列表项并更新关联表单元素的值。

JavaScript fu

We already have a "selected" classwe can apply to our selected list item, but we need a way to go about applying it to a <li>when it is clicked on and removing it from any of its previously "selected" siblings. Here's the JS to accomplish this:

我们已经有了一个“selected”，class我们可以将它应用到我们选择的列表项上，但是我们需要一种方法来<li>在它被点击时将它应用到 a并将它从它之前“selected”的任何兄弟中删除。这是实现此目的的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';
    }
  }
}

[Note: we can use simple classNameassignment and emptying because we are in complete control of the <li>s. If you (for some reason) needed to assign additional classes to your list items, I recommend modifying the code to append and remove the "selected" class to your classNameproperty.]

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

Finally, we add a little function to set the value of the original <select>(which will be submitted along with the form) when an <li>is clicked:

最后，我们添加一个小函数来设置单击<select>an 时原始值（将与表单一起提交）的<li>值：

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

We can then add these functions to the onclickevent of our <li>s:

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

There you have it. We have created our functional faux-. 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 byclass`-ing it as "replaced," adding that to the JS here:

你有它。我们已经创建了我们的功能性仿类. 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`-ing 它作为“已替换”，将其添加到 JS 中：

function selectReplacement(obj) {
  // append a class to the select
  obj.className += ' replaced';
  // create list for styling
  var ul = document.createElement('ul');
…

Then, add a new CSS rule to hide the

然后，添加一个新的 CSS 规则来隐藏

select.replaced {
  display: none;
}

With the application of a few images to finalize the design (link not available) , we are good to go!

通过应用一些图像来完成设计（链接不可用），我们很高兴！

And here is another linkto someone that says it can't be done.

这是另一个指向某人说无法完成的链接。

Answer 2

回答by nemoluca

extrapolate it! :)

推断吧！:)

  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

回答by jpsimard-nyx

From my personal experience where we tryed to put the border red when an invalid entry was selected, it is impossible to put border red of select element in IE.

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

As stated before the ocntrols in internet explorer uses WindowsAPI to draw and render and you have nothing to solve this.

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

What was our solution was to put the background color of select element light red (for text to be readable). background color was working in every browser, but in IE we had a side effects that the element where the same background color as the select.

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

So to summarize the solution we putted :

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

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

Note that color was set with hex code, I just don't remember which.

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

This solution was giving us the wanted effect in every browser except for the border red in IE.

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

Good luck

祝你好运

Answer 4

回答by nick

i was having this same issue with ie, then i inserted this meta tag and it allowed me to edit the borders in ie

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

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

Answer 5

回答by Nabeela Ansari

The border-style property is a short-hand command to define the border styles of all sides an html element. Each side can have a different style.

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

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

Answer 6

回答by Ionu? Staicu

Using ONLY css is impossbile. In fact, all form elements are impossible to customize to look in the same way on all browsers only with css. You can try niceformsthough ;)

仅使用 css 是不可能的。实际上，仅使用 css 就不可能将所有表单元素自定义为在所有浏览器上都具有相同的外观。不过你可以试试niceforms;)

Answer 7

回答by Ionu? Staicu

Check out this code... hope ur happy :)

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

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

Sajay

萨杰

Answer 8

回答by User

IE < 8 does not render the dropdown list itself it just uses the windows control which cannot be styled this way. Beginning from IE 8 this has changed and the styling is now applied. Of course, its market share is rather negligible yet.

IE < 8 不呈现下拉列表本身，它只是使用无法以这种方式设置样式的 windows 控件。从 IE 8 开始，这已经改变，现在应用了样式。当然，它的市场份额还可以忽略不计。

Answer 9

回答by User

I've worked around the inability to put a border on the select in IE7 (IE8 in compatibility mode)

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

By giving it a border as wel as a padding, it looks like something....

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

Not everything, but it's start...

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

Answer 10

回答by Rafael Berlanda

It solves to me, for my purposes:

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

.select-container {
  position:relative;
  width:200px;
  height:18px;
  overflow:hidden;
  border:1px solid white !important
}
.select-container select {
  position:relative;
  left:-2px;
  top:-2px
}

To put more style will be necessary to use nested divs .

要放置更多样式将需要使用嵌套 divs 。

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

提问by codegy

采纳答案by some

Edit: The link is broken I'm dumping the content

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

`<select>`Something New, Part 1

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

By Aaron Gustafson

亚伦·古斯塔夫森

The Problem

问题

The `<select>`

这 `<select>`

The solution

解决方案

Building the list

建立清单

Some clever CSS

一些巧妙的 CSS

JavaScript fu

JavaScript fu

回答by nemoluca

回答by jpsimard-nyx

回答by nick

回答by Nabeela Ansari

回答by Ionu? Staicu

回答by Ionu? Staicu

回答by User

回答by User

回答by Rafael Berlanda

相关推荐

最近更新

标签

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

提问by codegy

采纳答案by some

Edit: The link is broken I'm dumping the content

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

<select>Something New, Part 1

<select>新事物，第 1 部分

By Aaron Gustafson

亚伦·古斯塔夫森

The Problem

问题

The <select>

这 <select>

The solution

解决方案

Building the list

建立清单

Some clever CSS

一些巧妙的 CSS

JavaScript fu

JavaScript fu

回答by nemoluca

回答by jpsimard-nyx

回答by nick

回答by Nabeela Ansari

回答by Ionu? Staicu

回答by Ionu? Staicu

回答by User

回答by User

回答by Rafael Berlanda

相关推荐

适用于手机/小屏幕的响应式 CSS

启用排序时的 ASP.NET GridView CSS 问题

CSS 使 div 宽度适合内容而不是父级

CSS 我应该避免使用“text-align: justify;”吗？

相关推荐

最近更新

标签

`<select>`Something New, Part 1

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

The `<select>`

这 `<select>`