0

好きな映画を選んでもらう形式で、インピュテーションにはラジオを使っています。それを画像に置き換えましたが、選択すると別の画像に変わります。Chrome と IE では思い通りに動作しますが、Firefox では動作しません。ここでコード..

CSS

#votetable input[type=radio] {
float: bottom;
-webkit-appearance: none;
border: none;
height: 402px;
width: 275px; 
background: url("hobbit.jpg") left center no-repeat;    
background-size: 402px;
}
#votetable input[type="radio"]:checked {
background: url("select.jpg") left center no-repeat;
}

詳細については、html

HTML

    <table id="votetable">
        <tr>    <td>
                <label for="movie1"></label>
                <input type="radio" id="movie1" name="movie" value="batman"/>
                </td>

        </tr>
</table>

これは Chrome と IE ではうまく機能しますが、Firefox では機能しません。Firefox で動作させるためにコードに追加できるものはありますか? CSSとHTMLだけに固執したい。どんな助けでも大歓迎です。

4

1 に答える 1

-1

これがうまくいくことを願っています。:checked疑似クラスは最新のブラウザーでのみ機能することに注意してください。古いブラウザーをサポートしたい場合は、クラスを切り替えるなど、JavaScript が少し必要になります。

.custom-radio > input {
    /* hide the real <input> element */
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.custom-radio > .real-label {
    /* and use a background image on a <span> instead */
    display: inline-block;
    height: 402px;
    width: 275px;
    background: url("hobbit.jpg") left center no-repeat;
    /* just as an example as I did not have your image */
    border: 2px solid red;
    /* hide the label if you want */
    text-indent: -9999px;
}

.custom-radio > input:checked + .real-label {
    background-image: url("select.jpg");
    /* again, just as an example */
    border-color: green;
}

…そしてあなたのHTML。ご覧のとおり、 は を<label>包み込み、クリック<input>する<input>と もクリックを受け取ります。

<table id="votetable">
    <tr>    
        <td>
            <label class="custom-radio">
                <input type="radio" id="movie1" name="movie" value="batman"/>
                <span class="real-label">label</span>
            </label>
       </td>
    </tr>
</table>

ラジオ ボタンは 1 つしかないため、一度しか切り替えることができないことに注意してください。

于 2013-06-23T07:36:48.310 に答える