如果检查输入，如何显示 div，纯 CSS答案

【问题标题】：how to show div if input is checked, PURE CSS如果检查输入，如何显示 div，纯 CSS
【发布时间】：2021-03-12 00:02:37
【问题描述】：

我正在使用 amp 框架做一个测验，一切都差不多完成了，我纯粹使用 html 和 css 来做这个测验，而不使用任何 javascript。

对于输入，我使用单选按钮，而我自己的 css 我使用 Checked 来显示错误！并且正确！消息。

这是 CSS：

.quiz {
    position: relative;
    margin-bottom: 1px;
    width: 100%;
    overflow: hidden;
    grid-template-columns: 1fr 1fr;
    display: grid;
}
.quiz > input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.quiz__label {
    position: relative;
    display: block;
    cursor: pointer;
}
.quiz__answer,
.quiz__explanation {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s, opacity 0.1s;
}
.quiz__answer.correct {
    color: #2ecc71;
}
.quiz__answer.incorrect {
    color: #e60023;
}

这是用于显示说明文本和错误正确消息的 CSS：

.quiz > input:checked + label > .quiz__answer {
    opacity: 1;
}
.quiz > input:checked ~ .quiz__explanation {
    max-height: 100%;
    padding: 1em;
    opacity: 1;
    background-color: var(--komen-color);
}
.quiz__explanation {
    grid-column: 1 / span 2;
    margin-top: 10px;
}

这是 HTML：

<form method="post" action-xhr="#" target="_top">
    <h4>Select hashtags below that indicate the main purpose of the above information!</h4>
    <div class="quiz">
        <input class="quiz__radio" id="q1-answer1" name="tabs" type="radio" /><label class="quiz__label" for="q1-answer1">#document<span class="quiz__answer incorrect">Wrong!</span></label>
        <input class="quiz__radio" id="q1-answer2" name="tabs" type="radio" /><label class="quiz__label" for="q1-answer2">#inform<span class="quiz__answer correct">Correct!</span></label>
        <input class="quiz__radio" id="q1-answer3" name="tabs" type="radio" /><label class="quiz__label" for="q1-answer3">#sell<span class="quiz__answer incorrect">Wrong!</span></label>
        <input class="quiz__radio" id="q1-answer4" name="tabs" type="radio" /><label class="quiz__label" for="q1-answer4">#persuade<span class="quiz__answer incorrect">Wrong!</span></label>
        <input class="quiz__radio" id="q1-answer5" name="tabs" type="radio" /><label class="quiz__label" for="q1-answer5">#provoke<span class="quiz__answer incorrect">Wrong!</span></label>
        <input class="quiz__radio" id="q1-answer6" name="tabs" type="radio" /><label class="quiz__label" for="q1-answer6">#entertain<span class="quiz__answer incorrect">Wrong!</span></label>
        <div class="quiz__explanation"> // Message An explanation of the questions
            This text is an example explanation 
        </div>
    </div>
</form>

如果只选择正确答案，如何显示解释性文字。如果答案错误，将不会出现解释

JSFiddle

【问题讨论】：

在 CSS 中添加 #q1-answer2:not(:checked) ~ .quiz__explanation {display: none;}

标签： html css radio-button checked

【解决方案1】：

您可以将correct/incorrect 类添加到单选按钮。那么你可以使用一个选择器来同时检查这两个东西（如果它被检查并且是错误的）使用类似input.incorrect:checked的东西。

HTML：

<form method="post" action-xhr="#" target="_top">
    <h4>Select hashtags below that indicate the main purpose of the above information!</h4>
    <div class="quiz">
        <input class="quiz__radio incorrect" id="q1-answer1" name="tabs" type="radio" /><label class="quiz__label" for="q1-answer1">#document<span class="quiz__answer incorrect">Wrong!</span></label>
        <input class="quiz__radio" id="q1-answer2" name="tabs" type="radio" /><label class="quiz__label" for="q1-answer2">#inform<span class="quiz__answer correct">Correct!</span></label>
        <input class="quiz__radio incorrect" id="q1-answer3" name="tabs" type="radio" /><label class="quiz__label" for="q1-answer3">#sell<span class="quiz__answer incorrect">Wrong!</span></label>
        <input class="quiz__radio incorrect" id="q1-answer4" name="tabs" type="radio" /><label class="quiz__label" for="q1-answer4">#persuade<span class="quiz__answer incorrect">Wrong!</span></label>
        <input class="quiz__radio incorrect" id="q1-answer5" name="tabs" type="radio" /><label class="quiz__label" for="q1-answer5">#provoke<span class="quiz__answer incorrect">Wrong!</span></label>
        <input class="quiz__radio incorrect" id="q1-answer6" name="tabs" type="radio" /><label class="quiz__label" for="q1-answer6">#entertain<span class="quiz__answer incorrect">Wrong!</span></label>
        <div class="quiz__explanation">
            This text is an example
        </div>
    </div>
</form>

CSS（添加到您的）


.quiz__explanation {
  opacity: 0;
}

input.incorrect:checked ~ .quiz__explanation {
    max-height: 100%;
    padding: 1em;
    opacity: 1;
    background-color: var(--komen-color);
}

JS Fiddle

【讨论】：