I am creating an inquiry form with html and css.
Depending on the item checked with the radio button
I would like to display a check button
I can't do it well.

If I want to hide the check button if it is not selected

What should I do?

-Check box-

-Check box that I want to display only when you check the radio button of the inquiry-

-CSS notation-
input [value = "contact"]: checked ~ data-contents .siryou {
visibility: visible;
height: auto;


I'm sorry I'm busy, but I would appreciate it if you could teach me. .. ..

  • Answer # 1

    data-contentsThe selector isIt will point to the non-standard tag..data-contentsit might be.

  • Answer # 2

    In the presented HTML, CSS alone is not possible.
    Because the radio button and the hidden element must have a sibling relationship and a parent-child relationship.

    If you can change the HTML, it will look like the following.

    <input id = "i_qtype01" type = "radio" name = "qtype" value = "Inquiry">
    <label for = "i_qtype01">Inquiries</label><br>
    <input id = "i_qtype02" type = "radio" name = "qtype" value = "Request for information">
    <label for = "i_qtype02">Request for materials</label>
              <span>Optional (multiple answers allowed)</span>
          <input id = "check01_01" type = "checkbox">
          <label for = "check01_01">Home page</label>
          <input id = "check01_02" type = "checkbox">
          <label for = "check01_02">Advertising</label>
    .data-contents .siryou {
      display: none;
    input [value = "contact"]: checked ~ .data-contents .siryou {
      display: block;