0

私はスタックでこの質問を見てきました - How to style a <select> dropdown with CSS only without JavaScript? この手法を使用して角を丸くすることが可能かどうか疑問に思っています。

テストとしてノックアップした例では、選択ボックスがバックグラウンドで実行されているように見えるため、それは不可能でした。このテクニックは、私がこの例で求めているネイティブ OS サポートを維持しながら、ボックスのスタイリングを適切なレベルで制御するのに適していると思います。このテクニックで丸みを帯びた角を使用するのが難しすぎることが判明した場合は、削除します。

素敵な jsfiddle があります - http://jsfiddle.net/danield770/YvCHW/6/

私のcssは現在このようなものです。

.styled-select select {
    background: transparent;
    width: 268px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    height: 28px;
}

.styled-select{
    padding: 0;
    width: 240px;
    height: 28px;
    overflow: hidden;
    background: url(images/drop.png) no-repeat right #fff;
    border: 1px solid #ccc;
}
4

2 に答える 2

1

単に適用するだけでうまくいきますborder-radius。

.styled-select{
    border-radius: 10px;
}

jsFiddle デモ

于 2013-01-20T17:18:22.627 に答える
1

を使用border-radiusして角を丸くすることができます。参照

.styled{
   width: 120px;
   height: 34px;
   overflow: hidden;
   background: url(http://www.stackoverflow.com/favicon.ico) no-repeat 96% #ddd;
   border-radius: 10px;
}

フィドル

于 2013-01-20T17:19:40.297 に答える