Блог

Главная - Вопросы по программированию - как показать div, если входные данные проверены, ЧИСТЫЙ CSS

как показать div, если входные данные проверены, ЧИСТЫЙ CSS

#html #css #radio-button #checked

#HTML #css #переключатель #проверено

Вопрос:

я делаю тест с использованием amp framework, и все почти готово, я использую только 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

Комментарии:

1. Добавить #q1-answer2:not(:checked) ~ .quiz__explanation {display: none;} в CSS

Ответ №1:

Вы можете добавить correct / incorrect classes к переключателям. Таким образом, вы можете использовать селектор для проверки обеих вещей одновременно (если он проверен и неверен), используя что-то вроде 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

Метки: , ,