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

问题描述 投票：31回答：14

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

css internet-explorer internet-explorer-6 internet-explorer-7 cross-browser
14个回答
29
投票

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

这是一个更换控件的link，但我不知道那是不是你想做什么。

编辑：链接坏了我正在转储内容

<select> Something New, Part 1

By Aaron Gustafson

因此，您使用最新最好的CSS技术构建了一个美观，符合标准的网站。你已经掌握了每一个元素的造型控制，但在你的脑海中，一个小小的声音在唠叨你的<select>s是多么丑陋。那么，今天我们将探索一种沉默那个小声音并真正完成我们设计的方法。使用一些DOM脚本和一些创造性的CSS，你也可以使你的<select>s美丽......你不必牺牲可访问性，可用性或优雅降级。

问题

我们都知道<select>只是丑陋。事实上，许多人试图限制其使用，以避免其大约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>中有五个<select>s。这个<select>有一个独特的id“东西”。根据您正在查看的浏览器/平台，您的<select>可能看起来大致如下：

A <select> as rendered in Windows XP/Firefox 1.0.2. （来源：easy-designs.net）

或这个

A <select> as rendered in Mac OSX/Safari 1.2. （来源：easy-designs.net）

让我们说我们想让它看起来更现代，也许是这样的：

Our concept of a nicely-styled <select>. （来源：easy-designs.net）

那我们该怎么做呢？保持基本的<select>不是一种选择。除了基本的背景颜色，字体和颜色调整，你真的没有很多控制权。

但是，我们可以在新形式控件中模仿<select>的卓越功能，而不会牺牲语义，可用性或可访问性。为了做到这一点，我们需要检查<select>的性质。

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

解决方案

输入DOM。这个过程的最后一步是使<ul>功能/感觉像<select>，我们可以用JavaScript / ECMA Script和一些聪明的CSS来实现。以下是我们需要具备功能性人造<select>的基本要求列表：

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

通过这个计划，我们可以开始连续处理每个部分。

Building the list

所以首先我们需要收集所有属性并将其重建为a。我们通过运行以下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之前添加另一个循环来查找选定的<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);
…

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

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

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

我们快到了;让我们添加一些风格。

Some clever CSS

我不了解你，但我是CSS下拉的狂热粉丝（特别是Suckerfish品种）。我已经和他们一起工作了一段时间了，最​​后我突然意识到<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;
}

请注意，我们没有使用<ul>的：hover伪类使其打开，而是将它作为“selectOpen”进行class。原因有两方面：

  1. CSS用于表示，而不是行为;和
  2. 我们希望我们的faux-<select>表现得像一个真正的<select>，我们需要列表在onclick事件中打开而不是简单的鼠标悬停。

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

  1. 在列表折叠时单击选中/默认选项时显示完整的faux-<select>;和
  2. 单击“选择”列表项并折叠faux-<select>。

我们将创建一个名为selectMe()的函数来处理“选定的”class的重新分配，重新分配列表项的onclick事件，以及人造<select>的崩溃：

正如最初的Suckerfish告诉我们的那样，除了<a>之外，IE不会认识到悬停状态，所以我们需要通过用我们从中学到的东西来增加一些代码来解释这个问题。我们可以将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 fu

我们已经有一个“选定的”class我们可以应用于我们选择的列表项，但我们需要一种方法来将它应用于<li>，当它被点击并从之前的“选定”兄弟姐妹中删除它。这是完成此任务的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。如果您（由于某种原因）需要为列表项分配其他类，我建议修改要附加的代码并将“selected”类移除到className属性。

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

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

然后我们可以将这些函数添加到onclicks的<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 byclass，将其称为“替换”，在此处向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;
}

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

这里有另一个link给某人说它无法完成。

1
投票

您需要一个带有CSS和JavaScript的自定义设计选择框。如果用户禁用了JavaScript，您需要确保它完全降级为标准选择元素。

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

1
投票

要在IE中选择一边做边框，请使用IE的过滤器：

select.required {border-left：2px solid red; filter：progid：DXImageTransform.Microsoft.dropshadow（OffX = -2，OffY = 0，color =＃FF0000）}

我只在所有输入的一侧放置边框以获取所需状态。

对于一个全方位的边界来说，可能会有更好的效果......

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

1
投票

只需在html标记之前添加doctype声明即可

例如：http://msdn.microsoft.com/en-us/library/ms532853(v=VS.85).aspx

它也适用于JSP文件。欲了解更多信息：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

1
投票

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

HTML Doctype Declaration
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>

要使用嵌套的div，需要更多样式。

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);
5
投票

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

如前所述，Internet Explorer中的控件使用Windows API进行绘制和渲染，您无需解决此问题。

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

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

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

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

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

祝好运

5
投票

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

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

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

2
投票

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

2
投票

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

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

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

2
投票

看看这段代码......希望你快乐:)

niceforms

排序

2
投票

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.