Question

目前正在开发一个项目，有两个选项，我想要一个手指指针而不是标准的单选按钮，以及我想知道是否有可能只显示无线电图像对于仅被选中的那个。

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

由于

Answer 1

单选按钮由操作系统呈现，而不是浏览器。它们的样式在浏览器中一直是有限的和非标准化的。你最好尝试设计标签以达到你想要的效果。

Answer 2

尝试css：

input[type='radio']:checked {
    background: url("images/hand.png") center center no-repeat;
    opacity: 0;
}

Answer 3

这可以创建完整的自定义单选按钮。甚至不同的图标......

 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;    
}

样式单选按钮，仅显示选中

3 个答案: