I am tasked with creating an HTML form that includes 3 select attributes (color, shadow, background-color). Depending on the user's selections, these attributes will be applied to a h1 element on the page. I need to achieve this without using JavaScript, only utilizing HTML and CSS. The code I have implemented so far does not seem to be changing the attributes of the h1 element. Can someone please help me find a solution?
h1 {
margin: 0px;
padding: 0px;
margin-top: 100px;
}
table {
border: 3px double;
border-collapse: collapse;
}
th {
border-bottom: 3px double;
}
#text option[value="red"]:checked~h1 {
color: red;
}
#text option[value="blue"]:checked~h1 {
color: blue;
}
#shadow option[value="red"]:checked~h1 {
text-shadow: 2px 2px 5px rgba(255, 0, 0, 0.5);
}
#shadow option[value="blue"]:checked~h1 {
text-shadow: 2px 2px 5px rgba(0, 0, 255, 0.5);
}
#background option[value="silver"]:checked~h1 {
background-color: silver;
}
#background option[value="gold"]:checked~h1 {
background-color: gold;
}<center>
<h1>Hello World</h1>
<table>
<tr>
<th colspan="2">parameters</th>
</tr>
<tr>
<td><label for="text">text</label></td>
<td>
<select id="text" name="text">
<option value="red">red</option>
<option value="blue">blue</option>
</select>
</td>
</tr>
<tr>
<td><label for="shadow">shadow</label></td>
<td>
<select id="shadow" name="shadow">
<option value="blue">blue</option>
<option value="red">red</option>
</select>
</td>
</tr>
<tr>
<td><label for="background">background</label></td>
<td>
<select id="background" name="background">
<option value="silver">silver</option>
<option value="gold">gold</option>
</select>
</td>
</tr>
</table>
</center>