link label to checkbox using CSS only

In this fiddle : https://jsfiddle.net/5qm1a4pz/ , I am using for/id to select to link the checkbox and label explicitly. The idea is when text "click me to select checkbox" is clicked, the checkbox gets selected. However, it doesnt work in all browsers and in outlook web mail as well. How can I traverse the ":checked" feature in CSS to link the label text to the checkbox input? I want to click on the label text i.e. "click me to select checkbox" to select the checkbox.

Please note that wrapping the checkbox inside a label works, but I cannot use it as the checkbox is part of a table.

code :

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org"
    xmlns="http://www.w3.org/1999/xhtml">


<head>
<style>
#content {
    display: none;
}

input:checked ~ #content {
    display: block;
}
</style>
</head>


<body style="height:50px">

    <label for="show">Click Me to select checkbox</label>
    <input type=checkbox id="show">
    
    <span id="content">Text visible when checkbox is clicked </span>

</body>

</html>

link label to checkbox using CSS only

0 Answers