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

问题描述

有没有人有使用 CSS 在 Internet Explorer 中设置select"元素边框样式的解决方案?

解决方案

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

这是一个
_{(来源:
(来源:
(来源:easy-designs.net)}

那我们怎么做呢?保留基本的 不是一种选择.除了基本的背景颜色、字体和颜色调整，你真的没有很多控制.

然而，我们可以以一种新的形式模仿

的强大功能控制而不牺牲语义、可用性或可访问性.为了要做到这一点，我们需要检查 的性质.

A

本质上是一个无序列表的选择，您可以在其中选择一个值与表单的其余部分一起提交.所以，本质上，它是一个

的类固醇.继续这个思路，我们可以用一个无序列表替换，只要我们给它一些增强的功能.由于
可以在无数不同的样式方式，我们几乎无家可归.现在问题变成了如何确保我们在使用
时保持
的功能?"话，我们如何与表单一起提交正确的值，如果我们不再使用表单控件?

解决办法

输入 DOM.该过程的最后一步是制作

功能/感觉就像一个 ，我们可以用JavaScript/ECMA 脚本和一些巧妙的 CSS.这是基本清单我们需要有一个功能性的伪 :
• 点击列表将其打开，
• 单击列表项以更改分配的值 &关闭列表，
• 未选择任何内容时显示默认值，以及
• 选择某些内容时显示所选列表项.

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

建立列表

所以首先我们需要收集所有的属性和并将其重建为 .我们通过运行以下命令来实现这一点JS:

function selectReplacement(obj) {var ul = document.createElement('ul');ul.className = '选择替换';//收集我们对象的选项var opts = obj.options;//遍历它们，创建 <li>sfor (var i=0; i

您可能会想现在如果有一个选定的 已经?"我们可以通过在创建之前添加另一个循环来解决这个问题

• s 寻找选中的，然后将该值存储在为了class我们选择的
• 为selected":

  …var opts = obj.options;//检查选中的选项(默认为第一个选项)for (var i=0; i

  [注意:从现在开始，将选择选项 5，以证明这一点]

  现在，我们可以在页面上的每个 上运行这个函数(在我们的例子中，一)具有以下内容:

  function setForm() {var s = document.getElementsByTagName('select');for (var i=0; i

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

  一些巧妙的 CSS

  我不了解你，但我非常喜欢 CSS 下拉菜单(尤其是Suckerfish 品种).我一直和他们一起工作了一段时间，我终于明白了<select> 非常像一个下拉菜单，尽管还有一点在引擎盖下进行.为什么不将相同的文体理论应用到我们的faux-

  ?基本风格是这样的:

  ul.selectReplacement {边距:0；填充:0；高度:1.65em；宽度:300px；}ul.selectReplacement li {背景:#cf5a5a；颜色:#fff;光标:指针；显示:无；字体大小:11px；行高:1.7em；列表样式:无；边距:0；填充:1px 12px；宽度:276px；}ul.selectOpen li {显示:块；}ul.selectOpen li:hover {背景:#9e0000；颜色:#fff;}

  现在，为了处理selected"列表项，我们需要更加狡猾:

  ul.selectOpen li {显示:块；}ul.selectReplacement li.selected {颜色:#fff;显示:块；}ul.selectOpen li.selected {背景:#9e0000；显示:块；}ul.selectOpen li:hover,ul.selectOpen li.selected:hover {背景:#9e0000；颜色:#fff;}

  请注意，我们没有为

  使用 :hover 伪类来制作它open，而不是我们将它class-ing 为selectOpen".这样做的原因是双重:
  1. CSS 用于展示，而非行为；和
  2. 我们希望我们的仿表现得像一个真正的，我们需要在onclick中打开列表> 事件，而不是简单的鼠标悬停.

  为了实现这一点，我们可以将我们从 Suckerfish 中学到的知识应用到我们自己的 JavaScript 通过动态分配和删除这个 class``onclick 列表项的事件.为了做到这一点，我们需要能够动态更改每个列表项的 onclick` 事件以进行切换在以下两个动作之间:

  1. 在列表折叠时单击选定/默认选项时显示完整的人造；和
     点击时选择"一个列表项&折叠人造
     .

  我们将创建一个名为 selectMe() 的函数来处理重新分配选定的"class，为列表重新分配onclick 事件项目，以及虚假的折叠-:

  正如最初的 Suckerfish 告诉我们的那样，IE 将无法识别悬停状态除了 之外的任何东西，所以我们需要通过增加我们的一些代码和我们从他们那里学到的东西.我们可以附加 onmouseover 和onmouseout 事件到selectReplacement"class-ed

  及其
  • s:

    function selectReplacement(obj) {…//创建样式列表var ul = document.createElement('ul');ul.className = '选择替换';如果(window.attachEvent){ul.onmouseover = 函数(){ul.className += 'selHover';}ul.onmouseout = 函数(){ul.className =ul.className.replace(new RegExp(" selHover\b"), '');}}…for (var i=0; i

    然后，我们可以修改 CSS 中的一些选择器，以处理 IE 的悬停:

    ul.selectReplacement:hover li,ul.selectOpen li {显示:块；}ul.selectReplacement li.selected {颜色:#fff;显示:块；}ul.selectReplacement:hover li.selected**,ul.selectOpen li.selected** {背景:#9e0000；显示:块；}ul.selectReplacement li:hover,ul.selectReplacement li.selectOpen,ul.selectReplacement li.selected:hover {背景:#9e0000；颜色:#fff;光标:指针；}

    现在我们有一个列表，其行为类似于

  ;但我们仍然需要一种更改所选列表项并更新其值的方法关联的表单元素.

  JavaScript 功能

  我们已经有了一个选定的"class，我们可以应用到我们选定的列表项上，但是我们需要一种方法来在点击它时将它应用到

  • 并将其从其先前选定"的任何兄弟姐妹中删除.这是JS实现这一点:

    function selectMe(obj) {//获取 
     的兄弟姐妹var lis = obj.parentNode.getElementsByTagName('li');//依次通过for (var i=0; i，删除选中的类如果(lis [i] ！= obj){lis[i].className='';} else {//我们选中的
    ，添加选中的类lis[i].className='selected';}}}

    [注意:我们可以使用简单的 className 赋值和清空，因为我们在完全控制

  • s.如果您(出于某种原因)需要分配列表项的附加类，我建议将代码修改为在 className 属性中附加并删除selected"类.]

    最后我们添加一个小函数来设置原的值当点击

    时(将与表单一起提交):

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

    然后我们可以将这些函数添加到我们的

    s的onclick事件中:

    …for (var i=0; i

    给你.我们已经创建了我们的功能性仿.正如我们有没有隐藏原始，我们可以[看看它是如何行为](files/4.html) 因为我们从我们的文件中选择了不同的选项假-.当然，在最终版本中，我们不想要原来的来显示，所以我们可以通过class`-ing将其隐藏为replaced"，添加给这里的JS:

    function selectReplacement(obj) {//将一个类附加到选择中obj.className += '已替换';//创建样式列表var ul = document.createElement('ul');…

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

    select.replaced {显示:无；}

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

    <小时>

    这里是另一个链接，指向说无法完成的人.

    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:

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

    or this

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

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

    
    _{(source: 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 .

    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天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.