jquery单选按钮-在 JQuery 中对单选按钮使用自定义 CSS

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

我想在Jquery联通页面自定义一些单选按钮。 所以我使用 CSS 来自定义单选按钮。 但不幸的是，使用的 CSS 被 jquery 默认 CSS 覆盖了。

我的 HTML 代码片段如下。

<div class="answers">
        <label class="container-quiz">Doe
            <input type="radio" checked="checked" value="doe" name="answer2">
            <span class="checkmark">
        
        <label class="container-quiz">Kit
            <input type="radio" value="kit" name="answer2">
            <span class="checkmark">
        
        <label class="container-quiz">Buck
            <input type="radio" value="buck" name="answer2">
            <span class="checkmark">
        
        <label class="container-quiz">Hare
            <input type="radio" value="hare" name="answer2">
            <span class="checkmark">
        

我的CSS如下

.container-quiz {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default radio button */
.container-quiz input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
  border: 2px solid gray;
}
/* On mouse-over, add a grey background color */
.container-quiz:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container-quiz input:checked ~ .checkmark {
  background-color: white;
  border: 2px solid gray;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container-quiz input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container-quiz .checkmark:after {
  top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #f4364c;
}

当我从中删除 jqueryjs 脚本时，我得到了我想要的结果jquery单选按钮，如下所示。

当我使用 jquery 时jquery单选按钮，我没有得到我想要的结果。