gpt4 book ai didi

javascript - 隐藏单选按钮并仅以 django 形式显示标签(单选)

转载 作者:行者123 更新时间:2023-11-28 10:15:02 32 4
gpt4 key购买 nike

我想删除单选按钮,只显示是或否标签。为此,我隐藏了 radio 输入并使用 css3 选择器 (:checked + label) 根据选择更改背景颜色。但由于某种原因,这不起作用。

HTML(来自 Django 模板)

<div class="questionnaire-radio">
<label>
<input class="selector" name="mdq_answer_1" required="True" type="radio" value="y"> yes
</label>
</div>

CSS

.questionnaire-radio input[type=radio] {
display: none;
padding-top: 20px;
}

.questionnaire-radio input[type=radio]:checked + label {
background-color: #28c3ab;
font-weight: bold;
text-transform: uppercase;
}

.questionnaire-radio label {
font-weight: normal;
width: 100%;
border: solid #28c3ab;
border-radius: 100px;
margin: 0;
cursor: pointer;
}

.questionnaire-radio label:hover {
font-weight: bold;
text-transform: uppercase;
background-color: #28c3ab;
cursor: pointer;
}

任何帮助将不胜感激。我使用 Chrome 作为我的浏览器。我对 jQuery 解决方案持开放态度(如有必要)。

最佳答案

要按照您希望的方式使用 input[type=radio]:checked + label,需要以某种方式格式化。输入需要在您尝试访问的标签上方

看到它在这个 fiddle 中工作

http://jsfiddle.net/QBM5/egv8K/1/

<div class="questionnaire-radio">
<input id="aaa" class="selector" name="mdq_answer_1" required="True" type="radio" value="y" />
<label for="aaa">yes</label>

<input id="bbb" class="selector" name="mdq_answer_1" required="True" type="radio" value="n" />
<label for="bbb">no</label>

我做了一些假设并添加了一些标记以确保它能正常工作,但您应该能够按照这个示例让它正常工作。

关于javascript - 隐藏单选按钮并仅以 django 形式显示标签(单选),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24249760/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com