1

内部に SELECT 要素を持つ FORM があります。

<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 をクリックすると、選択は展開されません。フォーカスされているため、ユーザーはもう一度クリックしてオプションを展開する必要があります。

IE10 でどのように動作するかを確認するための JSFIDDLE は次のとおりです: http://jsfiddle.net/rtKGE/3/

4

1 に答える 1

0

css :focus で選択の境界線を設定することにもっと関係があることがわかりました

これをフィドルで使用してみて、動作することを確認できます

form select:focus
{
    color:red;
}

とにかく、あなたのフィドル以外では、border-colorやborder-styleなどの他のborderプロパティを設定でき、このcssのようにborder-widthを設定するたびに再び壊れるだけなので、それは奇妙なものです

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

それが役に立てば幸い。

よろしく、ダニエル

于 2013-08-02T14:50:38.940 に答える