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

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

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


现在我们的列表表现得像; 但是我们仍然需要一种方法来更改所选列表项并更新相关表单元素的值.


JavaScript fu

我们已经有一个"已选中" class我们可以应用于我们选择的列表项,但是我们需要一种方法来将它应用到
单击它并从之前"选定"的兄弟姐妹中删除它.这是完成此任务的JS:


function selectMe(obj) {
  // get the 
's siblings
  var lis = obj.parentNode.getElementsByTagName('li');
  // loop through
  for (var i=0; i, remove selected class
    if (lis[i] != obj) {
      lis[i].className='';
    } else { // our selected 
, add selected class
      lis[i].className='selected';
    }
  }
}


[注意:我们可以使用简单的className赋值和清空,因为我们完全控制了
s.如果您(由于某种原因)需要为列表项分配其他类,我建议修改要附加的代码并将"selected"类移除到您的className属性.


最后,我们添加一个小函数来设置单击
时的原始值(将与表单一起提交)
:


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


然后我们可以将这些函数添加到s 的onclick事件中
:


…
  for (var i=0; i

你有它.我们已经创建了我们的功能性. 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;
}


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



这里有另一个链接到某人说它无法完成.

        
@mydoghasworms:我很抱歉,两年半前回答的链接不再适用了.您仍然可以通过以下网址访问该页面:http://web.archive.org/web/20090922234755/http://v2.easy-designs.net/articles/replaceSelect/ 

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

        

3> jpsimard-nyx..：
根据我个人的经验,当我们选择无效条目时我们尝试将边框设置为红色时,不可能在IE中添加选择元素的边框红色.

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

我们的解决方案是将选择元素的背景颜色设置为红色(使文本可读).背景颜色在每个浏览器中工作,但在IE中我们有一个副作用,即元素与选择相同的背景颜色.

总结我们推出的解决方案:

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


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

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

祝好运

        

4> 小智..：
我有同样的问题ie,然后我插入这个元标记,它允许我编辑ie中的边框