css 如何显示颜色变化时，自定义单选按钮被选中？

pftdvrlh 于 2022-12-11 发布在其他

关注(0)|答案(2)|浏览(408)

我是新的编码一般，并一直在工作的一个测验程序的HTML和CSS（数据来自PostgreSQL，框架SpringBoot的Eclipse. PHP和JQuery不包括在教学大纲）。
我的问题是：
1.现在，我有了一个答案列表，用户必须从中进行选择。
1.希望按钮式收音机输入的颜色在用户点击时改变颜色。
1.设法创建按钮和光标时，它悬停在选择，但没有改变，尽管我的CSS。
有谁能告诉我我哪里做错了吗？提前谢谢你。

※根据评论中的建议更新了HTML和CSS+更多代码：

下面是HTML代码：
ID：https://i.stack.imgur.com/4IeWK.png

<body>
    <form method="post" action="/result" data-th-object="${form}">
        <!-- ヘッダータイトル -->
        <div class="headerbackground">
            <h6>模擬試験オンライン</h6>
        </div>
        <br>
        <!-- 試験指示 -->
        <div class="examinstruction">
            <p>表示された言葉の英単語を以下から選び、</p>
            <p>OKボタンをクリックしてください。</p>
        </div>
        <br>
        <!-- question -->

        <div data-th-each="list, st : ${form.list}">
            <p style="text-align: center; font-size: 12px;">
                <span data-th-text="${list.questionCount}">n</span> <span>/</span> <span
                    data-th-text="${list.questionTotal}">/n</span>
            </p>
            <div class="questionborder">
                <p style="font-size: 22px; font-weight: bold"
                    data-th-text="${list.content}">question</p>
            </div>
            <!-- answer choice -->
            <fieldset style="border: 0">
                <div class="choiceradiobox"
                    data-th-each="choice, stat : ${list.choice}">
                    <input id="selectedchoice" data-th-name="|choice${st.count}|"
                        type="radio" data-th-value="${choice}"
                        />
                        <label
                        for="selectedchoice"><span data-th-text="${choice}"></span></label>
                </div>
            </fieldset>
        </div>

        <!-- 解答完了ボタン -->
        <div class="submitsection">
            <input class="btn btn-secondary" style="font-size: 25px"
                type="submit" onclick=validate() value="OK!">
        </div>
    </form>
</body>

CSS：

input[type=radio] {
     display: none;
}

input[type="radio"]:checked + label {
    background: #455a64; 
    color: #eceff1; 
}

label {
    display: block; 
    margin: auto; 
    width: max-content; 
    text-align: center;
    padding-top : 0.05em;
    padding-bottom: 0.05em;
    padding-left: 5em;
    padding-right: 5em;
    line-height: 45px; 
    cursor: pointer; 
    border: solid #eceff1;
    background-color: #eceff1;
    padding-top: 0.05em;
}

css

来源：https://stackoverflow.com/questions/74527676/how-to-show-colour-change-when-customised-radio-button-is-selected

2条答案

按热度按时间

gijlo24d1#

更新：在末尾添加了实时测试
与class不同，每个id属性在整个文档中必须是唯一的。

More about id

还需要为每对input和label指定匹配的id和for，以使样式生效。

input[type="radio"]:checked + label选择器未正确定位label。
这是因为它使用相邻的同级选择器+，但是input和label由于其间的<br>而不是相邻的。
More about CSS combinators
要解决这个问题，可以使用通用兄弟组合子~来定位label：

input[type="radio"]:checked ~ label {
    background: #455a64; 
    color: #eceff1; 
}

或者删除input和label之间的<br>，并保留原始CSS：

<div class="choiceradiobox" data-th-each="choice, stat : ${list.choice}">
  <input
    id="selectedchoice"
    name="choice"
    type="radio"
    data-th-value="*{list[__${st.index}__].choice}"
  />
  <label for="selectedchoice"><span data-th-text="${choice}"></span></label>
</div>

两种方法都应该使label在:checked时改变颜色。
希望这会有所帮助！

LIVE TEST（使用下面的按钮运行）

第一次

赞(0）回复(0）举报 2022-11-27

kpbwa7wx2#

将以下代码粘贴到W3Schools "Try it" runner页面中。首先删除左手的所有代码，然后粘贴。我将input元素加倍，以便在此代码中可以看到效果。一旦您对样式感到满意，就删除多余的虚拟单选按钮。您会注意到我包含了@ JohnLi的CSS，把你的width: max-content;变成了width: auto;（只是玩玩）。

<!DOCTYPE html>
<html>
<header>
<style>
input[type=radio] {
     display: none;
}
input[type="radio"]:checked ~ label {
    background: #455a64; 
    color: #eceff1; 
}
label {
    display: block; 
    margin: auto; 
    width: auto; 
    text-align: center;
    padding-top : 0.05em;
    padding-bottom: 0.05em;
    padding-left: 5em;
    padding-right: 5em;
    line-height: 45px; 
    cursor: pointer; 
    border: solid #eceff1; 
    background-color: #eceff1;
    padding-top: 0.05em;
}
</style>
</header>
<body>

<h1>Display Radio Buttons</h1>

<form action="">
  <div>
   <input
    id="selectedchoice1"
    name="choice"
    type="radio"
    data-th-value="*{list[__${st.index}__].choice}"
  />
  <label for="selectedchoice1"><span data-th-text="${choice}">meow</span></label> 
  <p/> <!-- this seems to prevent bleeding of the color from top down. 
Neither br or div work. -->
  <input
    id="selectedchoice2"
    name="choice"
    type="radio"
    data-th-value="*{list[__${st.index}__].choice}"
  />
 <label for="selectedchoice2"><span>bark</span></label>
 </div>
</form>
</body>
</html>

赞(0）回复(0）举报 2022-11-27

我来回答

css 如何显示颜色变化时，自定义单选按钮被选中？

2条答案

相关问题

热门标签

最新问答