在 JQuery 中为单选按钮使用自定义 CSS

如何解决在 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"></span>
        </label>
        <label class="container-quiz">Kit
            <input type="radio" value="kit" name="answer2">
            <span class="checkmark"></span>
        </label>
        <label class="container-quiz">Buck
            <input type="radio" value="buck" name="answer2">
            <span class="checkmark"></span>
        </label>
        <label class="container-quiz">Hare
            <input type="radio" value="hare" name="answer2">
            <span class="checkmark"></span>
        </label>
</div>

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

当我从 <head> 中删除 jquery js 脚本时，我得到了我想要的结果，如下所示。

但是当我使用 jquery 时，我没有得到我想要的结果。

解决方法

您的样式与 JQM 的样式完全不同，并且您已经为您的单选按钮提供了完整的 CSS。所以最快的方法是告诉 JQM 避免增强这些元素。将 data-role="none" 添加到您的输入中。

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

否则，您需要覆盖 JQM .ui-radio-off,.ui-radio-on,.ui-radio-off:after,.ui-radio-on:after 样式（标准单选按钮已被 JQM 隐藏）。

在被覆盖的属性上使用 !important 属性

在 JQuery 中为单选按钮使用自定义 CSS

如何解决在 JQuery 中为单选按钮使用自定义 CSS

解决方法

相关推荐