1

私はIEで次のコードを使用していました. 私を助けてください。

<select  class="dropDown">
    <option>mango</option>
    <option>banana</option>
    <option>pomegranate</option>
    <option>papaya</option>
</select>


select.dropDown {
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    background : #666;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
select.dropDown::-ms-expand
    display: none;
}
4

1 に答える 1

1

コメントで述べたように。appearanceプロパティは IE 9 以下ではサポートされていません。過去に似たようなものを作りました。基本的に私がしたことは、選択要素の矢印の上に要素を作成することでした。

要素は絶対配置され、背景は Web ページの背景と同じように静的です。

selectbox
{
    position: relative;
    width: 200px;
    height: 200px

}

label 
{
    display: inline-block;
    position: absolute;
    right: 0;
    height: 23px;
}

label:after 
{
    content: '';
    width: 16px;
    height: 23px;
    position: absolute;
    right: 2px;
    color: #868583;
    background: white;
    border-left: 1px solid #868583;
    padding-left: 2px;
}

label > select 
{
    float: right;
    background: transparent;
    border: 1px solid #575757;
    color: #575757;
    font-size: 14px;
    letter-spacing: 2px;
    font-family: Arial;
    height: 100%;
}

pointer-events: none;クリックスルーできるようにしたい場合は、重なっている要素で使用することをお勧めします。

元の選択ボックスの幅の輪郭が見えないように、輪郭のフォーカスを表示します。

select::-moz-focus-inner {
  border: 0;
}

select:focus
{
  outline: none;
}

jsフィドル

これは私が行った簡単な例にすぎません。お役に立てば幸いです。

アップデート

このコードは、ユーザーが IE を使用する場合に使用できます。それ以外の場合は、コードを使用できます。

于 2013-11-08T13:57:17.510 に答える