css - IE10 - 使用 CSS 样式高度并在关注 SELECT 元素时添加边框需要用户双击 SELECT 元素

Question

我有一个表格，里面有一个 SELECT 元素。

<form name="something">
    <select>
        <option>One</option>
        <option>Two</option>
    </select>
</form>

和CSS：

select
{  
    height:20px;
} 

form select:focus
{
    border: #ffdead solid 2px;
}

我正在做的是确保所有 SELECT 始终具有相同的高度，但是当用户通过页面上的元素 TABS 时，我希望 SELECT 在焦点时具有边框。

这适用于大多数浏览器，但在 IE10 中，当用户单击 SELECT 时，选择不会展开 - 它是聚焦的，用户必须再次单击才能展开选项。

这是一个 JSFIDDLE，看看它在 IE10 中是如何工作的：http: //jsfiddle.net/rtKGE/3/

score 0 · Accepted Answer

我发现它更多地与在 css 中设置 select 的边框有关：focus

您可以尝试在小提琴中使用它并查看它的工作原理

form select:focus
{
    color:red;
}

无论如何，这很奇怪，因为除了你的小提琴之外，我可以设置其他边框属性，如边框颜色或边框样式，并且它只会在我设置边框宽度时再次中断，就像在这个 css 中一样

select:focus 
{
    border-color:#666666;
    border-style:solid;
    }

希望能帮助到你。

问候，丹尼尔

1 回答 1