IE6 / IE7 css边框选择元素 [英] IE6/IE7 css border on select element

查看：137
本文介绍了IE6 / IE7 css边框选择元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有没有人有解决方案使用CSS在Internet Explorer中对选择元素的边框进行样式设计？

解决方案

我知道，它是不可能在IE，因为它使用操作系统组件。



这是一个品种）。我已经
与他们一起工作了一段时间，它终于明白了一个
< select> 是一个下拉菜单，虽然有一些更多的
下罩下。为什么不对我们的
faux - < 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; 
}



现在，为了处理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; 
}

请注意，我们不使用：hover伪类c $ c>< ul> 以使
打开，而是将 class - 设置为selectOpen。原因是
两倍：


  1. CSS是用于演示，而不是行为;和 c>< select>
    2. 我们希望我们的假货 - < select& code>，我们需要在 onclick 事件中打开列表，而不是简单的鼠标悬停。

为了实现这个，我们可以把我们从Suckerfish学到的东西应用到
我们自己的JavaScript通过动态分配和删除这个 class 在
``onclick 事件的列表项。为了做到这一点，我们需要
能力来改变每个列表项的 onclick`事件，以在以下两个动作之间切换
：


  1. 在列表中点击所选/默认选项时显示完整的人为 - < select> 塌陷;和

  2. 点击列表项时选择列表项。折叠人为 - < select> 。

selectMe（）来处理
重新分配的selected class ，重新分配 onclick 列表
项目的事件，以及人为折叠 - < select> ：



由于原来的Suckerfish教导我们，IE将无法识别
上的悬停状态，除了< a> ，所以我们需要通过增加
来解释一些我们从他们学到的代码。我们可以将onmouseover和
onmouseout事件附加到selectReplacement class -ed < ul> 其
< li> s：

  function selectReplacement （obj）{
 ... 
 //创建样式列表
 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  ... 
 if ）{
 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中的几个选择器， for 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; 
}



现在我们有一个行为类似于选择> ;但我们仍然需要
需要更改所选列表项并更新
关联的表单元素的值。



JavaScript fu



我们已经有一个selected class 我们可以应用到我们选择的列表项
，当点击
并将其从任何先前选择的兄弟姐妹中移除时，可以将其应用于< li> 。这里是JS
来完成这个：

  function selectMe（obj）{
 // get the ; li>'s兄弟
 var lis = obj.parentNode.getElementsByTagName（'li'）; 
 //循环通过
 for（var i = 0; i  //不是所选的< li> ;,删除所选类
 if （lis [i]！= obj）{
 lis [i] .className =''; 
} else {//我们选择的< li>，添加选择的类
 lis [i] .className ='selected'; 
} 
} 
}

简单 className 分配和清空，因为我们在
完全控制< li> 如果你（由于某种原因）需要为列表项分配
个附加类，我建议将代码修改为
append，并将selected类移到 className property。]



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

  function setVal（objID，selIndex）{
 var obj = document.getElementById（objID）; 
 obj.selectedIndex = selIndex; 
}

然后我们可以将这些函数添加到 onclick 我们< li> 的活动：

  ... 
 for（var i = 0; 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）; 
} 
 ...

我们创造了我们的功能性人造 - 。因为我们有
没有隐藏原来的 ，但我们可以[看它如何
行为]（files / 4.html），因为我们选择不同的选项从我们的
faux - 。当然，在最终版本中，我们不想要原来的
 显示，所以我们可以隐藏 class` - 它被替换，添加
到JS这里：

  function selectReplacement（obj）{
 //为select添加一个类
 obj.className + ='replaced'; 
 //创建样式列表
 var ul = document.createElement（'ul'）; 
 ...

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

  select.replaced {
 display：none; 
}

使用几张图片完成
设计链接不可用），我们很好去！





这是另一个链接表示无法完成此操作。


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

解决方案

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

Here is a link where 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

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.

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.

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

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

or this

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

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 .

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

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?

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

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

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 class our selected <li> as "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.]

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

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

I don't know about you, but I am a huge fan of CSS dropdowns (especially the Suckerfish variety). 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:

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:

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:

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

To implement this, we can take what we learned from Suckerfish and apply it to our own JavaScript by dynamically assigning and removing this class in ``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:

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

We will create a function called selectMe() to handle the reassignment of the "selected" class, reassignment of the onclick events for the list items, and the collapsing of the 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:

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:

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.

JavaScript fu

We already have a "selected" class we 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:

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 className assignment 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 className property.]

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:

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

We can then add these functions to the onclick event of our <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 original to show, so we can hide it byclass`-ing it as "replaced," adding that to the JS here:

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 

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 link to someone that says it can't be done.

这篇关于IE6 / IE7 css边框选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆