web-dev-qa-db-ja.com

すべてのブラウザで動作するCSSカスタムドロップダウン選択IE7 + FF Webkit

すべてのブラウザで機能するカスタムドロップダウンを作成したいと思います。ここで作成しましたが、矢印をクリックできません。 selectの背景として設定すると、firefoxはその上の矢印を上書きします。誰かが私にすべてのブラウザで動作するカスタムの外観のドロップダウンを取得するための最良のテクニックは何か教えてもらえますか？

http://jsfiddle.net/DJDf8/1/

CSS：

#menulist {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 32px;
  border: 1px solid #000;
  width: 260px;
  text-indent: 8px;
}

.arrow {
  cursor: pointer;
  height: 32px;
  width: 24px;
  position: absolute;
  right: 0px;
  background-color: #c8c8c8;
  background: url('http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png') 0;
}
<span style="position:relative;">
         <span class="arrow" ></span>
<select id="menulist">
         <option value="one">One</option>
         <option value="two">Two</option>
</select>
</span>
csscss3cross-browser
38
Faz Ya

これは非常に簡単です。選択要素に背景画像を追加し、必要な場所に配置するだけで、追加することを忘れないでください：

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

http://shouldiprefix.com/#appearance によると

Microsoft EdgeおよびIE mobileは、相互運用性の理由から、-ms-ではなく-webkit-プレフィックスでこのプロパティをサポートします。

私はちょうどこのフィドルを作りました http://jsfiddle.net/drjorgepolanco/uxxvayqe/

22
drjorgepolanco

リンクごと： http://bavotasan.com/2011/style-select-box-using-only-css/ 行う必要のある追加の手直しがたくさんあります（追加のdivと位置を追加また、オプションドリルダウンが選択に対して誤ってアラインされるため、デザインが破損します。

これは、独自のドロップダウンイメージを配置し、ブラウザのデフォルトのドロップダウンを削除できる簡単で簡単な方法です（追加のdivを使用せずに）。クロスブラウザも同様です。

HTML

<select class="dropdown" name="drop-down">
  <option value="select-option">Please select...</option>
  <option value="Local-Community-Enquiry">Option 1</option>
  <option value="Bag-Packing-in-Store">Option 2</option>
</select>

CSS

select.dropdown {
  margin: 0px;
  margin-top: 12px;
  height: 48px;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  padding: 9px;
  font-family: tescoregular;
  font-size: 16px;
  color: #666666;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  -moz-appearance: none;
  appearance: none;
  background: url('yoururl/dropdown.png') no-repeat 97% 50% #ffffff;
  background-size: 11px 7px;
}
9
Mainak Bhattacharjee

あなたはSelect2プラグインをチェックするかもしれません：

http://ivaynberg.github.io/select2/

Select2は、選択ボックスのjQueryベースの置換です。検索、リモートデータセット、および結果の無限スクロールをサポートしています。

それは非常に人気があり、非常に保守的です。すべてではないにしても、ほとんどのニーズをカバーするはずです。

8
lokers

pointer-eventsは、矢印ボタンの上にdivを置くことはできますが、矢印ボタンをクリックすることはできるため、この問題には役立ちます。

pointer-events cssは、divをクリックすることを可能にします。

ただし、このアプローチはIE11より古いIEバージョンでは機能しません。矢印ボタンの上に配置する要素がSVG要素である場合、IE8およびIE9で何か動作する可能性がありますが、このように進めたい方法でボタンをスタイル設定する方が複雑になります。

ここにJsフィドルの例： http://jsfiddle.net/e7qnqzx6/2/

2
sboisse

私も同様の問題を抱えていました。最後に https://techmeals.com/fe/questions/htmlcss/4/How-to-customize-the-select-drop-down-in-css-which-works-で1つのソリューションを見つけましたすべてのブラウザ用

注意：

1）Firefoxサポートの場合、SELECT要素の親に対して特別なCSS処理があります。詳しく見てください。

2） Down.png からdown.pngをダウンロードします

CSSコード

        /* For Firefox browser we need to style for SELECT element parent. */

        @-moz-document url-prefix() {

            /* Please note this is the parent of "SELECT" element */

            .select-example {   
                background: url('https://techmeals.com/external/images/down.png');
                background-color: #FFFFFF;
                border: 1px solid #9e9e9e;
                background-size: auto 6px;
                background-repeat: no-repeat;
                background-position: 96% 13px;
            }
        }

        /* IE specific styles */
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
        {
                select.my-select-box {
                padding: 0 0 0 5px;
            }
        }

        /* IE specific styles */
        @supports (-ms-accelerator:true) {
                select.my-select-box {
                padding: 0 0 0 5px;
            }
        }

        select.my-select-box  {
            outline: none;
            background: #fff;
            -moz-appearance: window;
            -webkit-appearance: none;
            border-radius: 0px;
            text-overflow: "";
            background-image: url('https://techmeals.com/external/images/down.png');
            background-size: auto 6px;
            background-repeat: no-repeat;
            background-position: 96% 13px;
            cursor: pointer;
            height: 30px;
            width: 100%;
            border: 1px solid #9e9e9e;
            padding: 0 15px 0 5px;
            padding-right: 15px\9;      /* This will be apllied only to IE 7, IE 8 and IE 9 as */
            *padding-right: 15px;        /* This will be apllied only to IE 7 and below. */
            _padding-right: 15px;       /* This will be apllied only to IE 6 and below. */
        }

HTMLコード

    <div class="select-example">
        <select class="my-select-box">
            <option value="1">First Option</option>
            <option value="2">Second Option</option>
            <option value="3">Third Option</option>
            <option value="4">Fourth Option</option>
        </select>
    </div>
1
HumbleGeek