对 JQuery 中的单选按钮使用自定义 CSS

Question

我想要 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 我没有得到我想要的结果。

Answer 1

对被覆盖的属性使用 !important 属性

Answer 2

您的风格与 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 隐藏）。

对 JQuery 中的单选按钮使用自定义 CSS

Use custom CSS for radio buttons in JQuery

html

css

jquery

radio-button

jquery-mobile