Question

是否有人使用CSS在Internet Explorer中为“select”元素的边框设置样式？

Answer 1

推断它！：）

  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 2

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

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

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

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

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

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

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

祝你好运

Answer 3

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

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

Answer 4

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

Answer 5

查看此代码...希望你高兴：）

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

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

Answer 7

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

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

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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

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

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

Answer 11

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

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

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

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

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

Answer 12

只需在html标记

之前添加doctype声明即可

例如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

它也可以在JSP文件中使用。有关详细信息： HTML Doctype Declaration

Answer 13

有效!!!使用以下代码：

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

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

14 个答案: