4

独自のラジオボタンを作ってみました。Chromeではすべてがうまく機能しますが、IEとFirefoxではまだいくつかの表示エラーがあります。

コードは次のとおりです。

HTML

<input type="radio" id ="light" name="choice" value="none""><label for="light">Light me</label>

CSS

input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png') center center no-repeat;
background-size: 2em;
width: 2em;
height: 2em;
cursor: pointer;
vertical-align: middle;
}​

なにが問題ですか？

回答ありがとうございます。

4

1 に答える 1

6

これを試してみてください：jsfiddle

あなたがする必要があるのは、ラジオボタンを非表示にし、それを切り替えるためにラベルを使用することだけです。そこで、に設定input[type="radio"]しdisplay:none、CSSの一部をlabelボタンのセレクターまたは新しいセレクターに移動しました。これにクラス「ボタン」を指定しました。

HTML：

<input type="radio" id ="light" name="choice" value="none"">
<label for="light">
<span class="button"></span>
Light me
</label>​​​

CSS：

input[type="radio"] {
    display:none;
}
.button {   background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png') center center no-repeat;
    background-size: 2em;
    width: 2em;
    height: 2em;
    float:left;
}
label { 
    cursor: pointer;
    line-height:32px;
}
​

CSSを使用した入力のスタイル設定の概要は次のとおりです。http：//www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

于 2012-11-28T20:48:04.513 に答える