-1

<select>100pxサイズで表示しなければならないのですが、<option>中の方が長いので全体を表示したいので、で囲んでサイズを100px<select>に<div>しました。ドロップダウン矢印の背景画像を使用しました。私の問題は、以下のリンクでわかるように、テキストが画像に重なっているということです。テキストが画像に重ならないようにする方法は？

プラグインを使いたくない。

http://jsfiddle.net/JavaKB/hf5CV/8/

4

3 に答える 3

1

背景画像をdivに適用する代わりに、:after擬似要素を使用して背景画像を適用し、選択の上に配置できます。

次のようになります。

.styled-select {
    width: 100px;
    padding: 2px;
    overflow: hidden;
    position: relative;
}
.styled-select:after {
    content: '';
     background: url("http://i.stack.imgur.com/DNROu.jpg") no-repeat right;
    width: 20px;
    height: 18px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

pointer-events: none;矢印の画像をクリックしたときにクリックしても選択がトリガーされるように、 を追加したことに注意してください。ブラウザ間の互換性が完全ではない可能性があります。それについて調査する必要があるかもしれません...

あなたのフィドルを更新しました： http://jsfiddle.net/hf5CV/24/

于 2013-07-08T21:08:45.060 に答える
0

私は別の解決策を見つけました。

http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm

ここから：

幅が広すぎるドロップダウン メニュー項目の推奨事項は?

于 2013-07-12T15:42:07.653 に答える