10

下の画像のような選択要素を作成するにはどうすればよいですか?

ここに画像の説明を入力

私のコードは

<select>
    <option>-- Select City --</optoin>
    <option>Delhi</option>
    <option>Gurgaon</option>
</select>

これはjQueryで利用できますが、純粋なCSSを使用したい.

4

5 に答える 5

24

これは CSS を利用した選択メニューです。必要に応じてカスタマイズできます。

label.custom-select {
    position: relative;
    display: inline-block;

}

.custom-select select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #000;
    color:white;
    border:0;
}

/* Select arrow styling */
.custom-select:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 60%;
    line-height: 30px;
    padding: 0 7px;
    background: #000;
    color: white;
    pointer-events: none;
}

.no-pointer-events .custom-select:after {
    content: none;
}
<label class="custom-select">
    <select>
        <option>Sushi</option>
        <option>Blue cheese with crackers</option>
        <option>Steak</option>
        <option>Other</option>
    </select>
</label>

JSFiddle

于 2012-04-17T12:04:10.497 に答える
4

it を使用するpointer-events:none;と、矢印をクリックして選択フィールドをアクティブにすることができます。そのため、その要素の CSS は次のようになります。

.custom-select:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 60%;
    line-height: 30px;
    padding: 0 7px;
    background: #000;
    color: white;
    pointer-events:none;
}
于 2014-05-09T12:24:01.187 に答える
0 
option{
  background-image:url(image.png);
  background-repeat: no-repeat;
}
于 2012-04-17T05:54:34.870 に答える
0

Javascript なしでスクリーンショットに表示されているように、選択をカスタマイズする方法はありません。

この例では、色、パディング、ボーダーはカスタマイズできますが、ボタン自体はカスタマイズできないことがわかります。

于 2012-04-17T05:55:51.460 に答える
-1

選択ボックスに背景画像を追加しても、そのハンドラーを右側に隠すことはできません。これを使用することをお勧めします: http://jamielottering.github.com/DropKick/

必要に応じて CSS を少し変更する必要があります。

于 2012-04-17T06:02:22.203 に答える