0

'目前正在做一个项目，有两个选项，我想要一个指向手指图像而不是标准单选按钮，以及这个我想知道是否可以只显示一个单选按钮仅被选中。

我尝试过使用 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

单选按钮由操作系统呈现，而不是浏览器。在浏览器中，它们的样式一直受到限制且非标准化。你最好尝试设置标签的样式来完成你想要的。

于 2013-02-28T15:50:09.537 回答
0

尝试CSS：

input[type='radio']:checked {
    background: url("images/hand.png") center center no-repeat;
    opacity: 0;
}
于 2013-03-01T05:53:01.673 回答
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 回答