1

選択ボックスのデフォルトの矢印とチェックボックスのグラデーションを削除する方法を知りたいのですが、カスタム画像を使用したいです。

たとえば、ここにいくつかのコードがあります。

 <select class="selectParent">
     <option value='1'>Title</option>
     <option value='2'>Description</option> 
     <option value='3'>Author</option>
 </select>

-webkit- 外観を使用してデフォルト ステータスを削除する解決策をいくつか検索しました。と -moz- 外観。しかし、IEではわかりません。IE のデフォルト ステータスを削除する可能性はありますか?

同じロジックとして、チェックボックスのデフォルトステータスを削除する方法を知りたいです。

<input type="checkbox" name="category" id="category10"/>

私は良い答えを待っていますthx

4

2 に答える 2

6

appearance: noneうまくいきますが、これはクロスブラウザの方法ではありません。

select, input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

デモ

編集：

チェックボックスのクロスブラウザメソッドは次のとおりです。

http://jsfiddle.net/kyLq4/1/

于 2013-05-03T01:33:54.093 に答える
5

これは現在、Opera を除くすべてのブラウザーで可能です (ただし、Blink に切り替えると機能するはずです)。

Firefox と WebKit/Blink の場合はappearance: none;、 を使用する必要があります。これはかなり扱いが難しく、すべてのスタイリングが削除されます。

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
}

必要に応じて接頭辞のないバージョンを含めることもできますが、外観プロパティは標準ではなくなりました。CSS3 Basic UIから削除されました。

IE の場合、-ms-check 疑似要素を使用して、チェック マークのスタイルを具体的に設定できます。チェックマークを非表示にするだけの場合は、次の操作を実行できます。

input[type="checkbox"]::-ms-check {
    color: transparent;
}

要素全体を非表示にする場合appearance: none;は、次のようにします。

input[type="checkbox"]::-ms-check {
    display: none;
}

チェックマークを戻すには、:checked疑似クラスを使用する必要があります。

input[type="checkbox"]:checked {
    background-color: green;
}

後者のアプローチを使用したデモを次に示します。チェックしたときに背景色を設定しましたが、画像を同じように簡単に使用できます: http://jsfiddle.net/HxqKu/3/

于 2013-05-03T05:11:44.930 に答える