如果选中输入，如何显示 div，PURE CSS

Question

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

输入我用radio button，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

Answer 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

如果选中输入，如何显示 div，PURE CSS

how to show div if input is checked, PURE CSS

html

css

radio-button

checked