0

'現在プロジェクトに取り組んでいます.2つのオプションがあり、標準のラジオボタンではなく人差し指の画像が必要です.これと同様に、ラジオの画像のみを表示できるかどうか疑問に思っていました.のみ選択されます。

js ライブラリを使用してみましたが、動作しないようです

現在のコード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.screwdefaultbuttonsV2.min.js" ></script>
<script type="text/javascript">
$('input:radio').screwDefaultButtons({ 
    image: "url(images/hand.png)",
    width:   39,
    height:  17
});
</script>
</head>

<body>

        <div id="content">


<label for="LiquoriceandPeppermint" class="check">Liquorice and Peppermint<input type="radio" name="flavour" id="LiquoriceandPeppermint" value="option1" /></label><br>

<label for="RooibusCremeCaramel " class="check">Rooibus Crème Caramel <input type="radio" name="flavour" id="RooibusCremeCaramel " value="option2" /></label>

</div>

</body>
</html>

ありがとう

4

3 に答える 3

0

CSSを試してください：

input[type='radio']:checked {
    background: url("images/hand.png") center center no-repeat;
    opacity: 0;
}
于 2013-03-01T05:53:01.673 に答える
0

ラジオ ボタンは、ブラウザではなく OS によってレンダリングされます。それらのスタイリングは常に制限されており、ブラウザ間で標準化されていません。目的を達成するために、ラベルのスタイルを設定することをお勧めします。

于 2013-02-28T15:50:09.537 に答える
0

これにより、完全にカスタムのラジオ ボタンを作成できます。違うアイコンも…

 input[type="radio"] {
        display:none;
        vertical-align: middle;
    }
input[type="radio"] + label {
    display:inline;
    font-size: 18px;

}
input[type="radio"] + label:before {
    content: '';
    display:inline-block;
    width: 25px;
    height: 25px;
    border: 2px solid black;
}

input[type="radio"][class="customRadio"] + label:before {
    background: url('../icons/bc.png') no-repeat;
}

input[type="radio"][class="customRadio"]:checked + label:before {
    background: url('../icons/bc1.png') no-repeat;    
}
于 2013-03-01T07:40:16.587 に答える