3

私はこのスタイルを作成しましたが、IEとFirefoxでそれを機能させる方法がわかりません。

input[type="checkbox"]:before
{
    content:"";
    display:inline-block;
    background: url("../images/controls.png") 0% 5%, url("../images/controls.png") 0% 2.5%, white;
    display: block;
    width: 19px;
    height: 19px;
    vertical-align: middle;
}
input[type=checkbox]:hover:before
{
    background-position: 0% 10%;
}
input[type=checkbox]:checked:before
{
    background: url("../images/controls.png") 0% 15.1%, url("../images/controls.png") 0% 5%, white;
}

input[type="radio"]:before
{
    content:"";
    display:inline-block;
    background: url("../images/controls.png") 0% 2.5%, url("../images/controls.png") 0% 30.6%, white;
    display: block;
    width: 19px;
    height: 19px;
    vertical-align: middle;
}
input[type=radio]:hover:before
{
    background-position: 0% 35.6%;
}
input[type=radio]:checked:before
{
    background: url("../images/controls.png") 0% 40.6%, url("../images/controls.png") 0% 30.6%, white;
}

クロームとサファリで完璧に動作しています。背景画像を使おうとしましたが、うまくいきません。誰かがこれで私を助けることができますか？ありがとう。

私はこの画像（controls.png）を使用しています：

4

2 に答える 2

1

複数の背景に対するブラウザのサポートは比較的広く行われており、ベンダーのプレフィックスを必要とせずに、すべての主要なブラウザがサポートを提供しています。Firefoxは、バージョン3.6（Gecko 1.9.2）以降、Safariはバージョン1.3以降、Chromeはバージョン10以降、Operaはバージョン10.50（Presto 2.5）以降、InternetExplorerはバージョン9.0以降で複数のバックグラウンドをサポートしています。

http://www.css3.info/preview/multiple-backgrounds/から

于 2012-09-04T16:56:32.003 に答える
0

チェックボックスとラジオボタンのカスタムクロスブラウザースタイリングをご覧ください。

お役に立てれば。

于 2012-09-04T17:01:26.017 に答える