1. ホーム
  2. html

[解決済み] IEの選択矢印を削除する

2022-07-13 03:46:14

質問

select要素で、矢印を削除し、他のアイコンを追加したいのですが。 私はFirefox SafariとChromeのためにそれを行うことができます。 しかし、これは上で動作しませんでした IE9 .

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

見る フィドル IE9 . 私が必要とするすべてのものは、IE9の矢印を削除することです。 JSFIDDLEの回答をお願いします。

どのように解決するには?

IE9では 純粋にハックして を使用することができます。 divとselectの高さと幅をカスタマイズしているので、その部分を div:before をあなたのものと一致させる必要があります。

IE10であれば、以下のcss3を使って可能です。

select::-ms-expand {
    display: none;
}

ただし、jQueryのプラグインに興味がある方は Chosen.js を試してみるか、あるいはjsで自作することもできます。