3

css :after属性を使用して選択ボックスをカスタマイズしています。

HTML:

<div class="styled">
    <select>
        <option>India, Rupees (Rs.)</option>
        <option>USA, Dollars ($) </option>
        <option>United Kingdom, Pounds (&#163;)</option>

    </select>
</div>

CSS:

div.styled{

    display: inline-block;

    float: left;

    position: relative;

    border-right: 1px solid #CCC;

    border-radius: 3px;

    box-shadow: 1px 1px 1px #ddd;

}
.styled select option{

    padding: 5px;

}

div.styled:after{

    content: "";

    background: #fff url("dn_arw.png") no-repeat 2px 4px; 

    display: inline-block;

    float: left;

    height: 18px;

    position: absolute;

    right: 8px;

    top: 6px;

    width: 15px;

}

以下は画像とjsフィドルです

http://jsfiddle.net/CtYnt/

問題は、「下矢印画像」と重なっている領域をクリックできないことです

4

1 に答える 1

3

Chrome、Firefox、および Safari で動作させるには、:afterブロックで 1 行の CSS を使用できます。

pointer-events: none;

IE はより多くの作業を必要とします。最も簡単な方法は、:afterブロックとセットで IE の条件ステートメントを使用することです。

display:none;

または、オーバーレイされた DIV が IE で動作する必要がある場合は、ここで詳しく説明されているハックがあります。

于 2013-06-07T11:17:46.593 に答える