【发布时间】：2021-04-06 01:48:50
【问题描述】：
我想在 Jquery 移动页面中添加一些自定义的单选按钮。所以我使用 CSS 来自定义单选按钮。但不幸的是，使用的 CSS 被 jquery 默认 css 覆盖。
我的HTML代码sn-p如下。
<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 时，我没有得到我想要的结果。
【问题讨论】：
-
JQuery 是一个 JavaScript 库，它不应该覆盖你的 css 样式，你指的是引导程序吗？
-
为什么 jquery 脚本首先在你的 中？那不是他们所属的地方。正如 suii 所言，你是否意味着 Bootstrap？如果您运行的任何脚本会改变您的 CSS，Jquery 可能会影响您的 CSS 样式。所以要真正回答我们需要： - 你的完整 html 包括 标签 - 你的脚本被执行为 Jquery
-
我正在使用 JQuery 移动 CSS 样式。我在
<head>标签中使用`code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />` 来导入它
标签： html jquery css jquery-mobile radio-button