Question

是否可以更改HTML表单中<select/>元素的边框颜色？

border-color样式适用于Firefox但不适用于IE。

我在Google上找不到真正的答案。

Answer 1

我会在div块中包含那个select块并设置border属性，如下所示：

<div style="border: 2px solid blue;">
  <select style="width: 100%;">
    <option value="Sal">Sal</option>
    <option value="Awesome">Awesome!</option>
  </select>
</div>

你应该能够用它来完成你需要的东西。

Answer 2

正如Diodeus所说，除了<select>元素的默认边框外，IE不允许任何其他内容。但是，我知道有两个黑客可以达到类似的效果：

使用与下拉列表完全位于同一位置的DIV并设置其边框。下拉列表似乎有边框。
使用Javascript解决方案，例如，提供here的解决方案。

Answer 3

不，<select>控件是系统级控件，而不是IE中的客户端级控件。有几个版本它甚至没有与z-index很好地配合，几乎可以将它放在几乎所有的东西之上。

要做任何花哨的事情，你必须使用CSS和你自己的元素来模拟功能。

Answer 4

select{
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1,color=#FF0000);
}

适合我。

Answer 5

~~您可以在IE中设置边框颜色，但是存在一些问题。~~

唉......我本可以发誓你可以做到这一点......只是测试并意识到我不正确。以下注释仍然适用。

（Beta1 - > RC1）更改边框颜色或背景颜色/图像会导致WindowsXP中控件的去除（下拉箭头和框看起来像Windows 95）
您仍然无法很好地设置选择控件中的选项，因为IE不支持它。（see bug #291）

Answer 6

将边框颜色替换为轮廓颜色应该可以。

Answer 7

<style>
.form-error {
        border: 2px solid #e74c3c;
    }
</style>



<div class="form-error">
                                {!! Form::select('color', $colors->prepend('Please Select Color', ''),           ,['class' => 'form-control dropselect form-error'
                                ,'tabindex' => $count++, 'id' => 'color']) !!}
                                </div>

更改<select> HTML表单</select>上的边框颜色

7 个答案: