How to create checkboxes and radiobuttons with only html and css

Question

I'm currently working on a school-project where a big part of my idea is based on radio-buttons and checkboxes. I've found a lot of codes out there on how to create them, the only problem is that I'm only allowed to use certain html-tags and no jQuery.

The tags I can use:

• html, head, body, title, meta, link

• header, section, article, footer

• div

• h1-h6

• p

• span

• ul, ol, li

• a

• img

• audio

Is there any way to create checkboxes and radio-buttons with these tags?

Answer 1

Radiobuttons

I figured out the way to do the radiobuttons but they work only as far as one of them is focused.

 .radio { display: inline-block; position: relative; margin-left: 1em; padding-left: 1.5em; } .radio::before { content: ""; display: inline-block; border: 1px solid black; width: 1em; height: 1em; border-radius: 100%; position: absolute; left: 0; top: 0; } .radio:focus { outline: none; } .radio:focus::after { content: ""; display: inline-block; border: 1px solid black; width: 0.5em; height: 0.5em; border-radius: 100%; position: absolute; background-color: black; left: 0.25em; top: 0.25em; } 

 <ul class="radio-group"> <li tabindex="0" class="radio">Option 1</li> <li tabindex="0" class="radio">Option 2</li> <li tabindex="0" class="radio">Option 3</li> </ul> 

The key element here is the tabindex in <li> items that makes them focusable.

The tabindex global attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name). It accepts an integer as a value, with different results depending on the integer's value: [...]

Checkboxes

I styled them but I have no clue on how to make them work without JS . (Now they behave exactly like the radios.)

 .check { display: inline-block; position: relative; margin-left: 1em; padding-left: 1.5em; } .check::before { content: ""; display: inline-block; border: 1px solid black; width: 1em; height: 1em; position: absolute; left: 0; top: 0; } .check:focus { outline: none; } .check:focus::after { content: ""; display: inline-block; border-left: 3px solid black; border-bottom: 3px solid black; transform: rotate(-45deg); width: 1em; height: 0.5em; position: absolute; left: 0.1em; top: -0.1em; } 

 <ul class="check-boxes"> <li tabindex="0" class="check">Option 1</li> <li tabindex="0" class="check">Option 2</li> <li tabindex="0" class="check">Option 3</li> </ul> 

Hint: The only pure CSS thing that comes to my mind remotely similar of saving a state would be CSS counters , but since you can't build a selector based on counter's value...

Answer 2

To input data from users in HTML your only option is the input's tag. Take a look official documentation at:

https://www.w3schools.com/html/html_form_input_types.asp

Only with allowed tags your can't create radio-buttons and checkboxes.