up until recently the following code snippet has worked fine, the checkbox itself is hidden by CSS, and clicking on the button changed the state of the checkbox, which can then be detected upon form submit, however, recently (not sure when) this stopped working, and now the click of the button does nothing:
<label for="someCheckBox" class="someCheckBox">
<input type="checkbox" id="someCheckBox" name="someCheckBox" value="checkBox" />
<button type="button" title="Some CheckBox">Some CheckBox</button>
</label>
CSS:
#someCol label.someCheckBox button {
background-color: black;
color: #C0C0C0;
height: 1.5em;
margin: 10px 4px 0 0;
border: 1px solid #C0C0C0;
-moz-border-radius: .75em;
-webkit-border-radius: .75em;
border-radius: .75em;
font-size: 1.0em;
font-family:"Final Frontier";
font-weight: bold;
width: 40px;
}
#someCol label.someCheckBox button:hover {
background-color: #C0C0C0;
color: black;
border: 1px solid #606060;
cursor: pointer;
-moz-animation-duration: 3s;
-moz-animation-name: glow;
-moz-animation-iteration-count: infinite;
-moz-animation-play-state: running;
-webkit-animation-duration: 3s;
-webkit-animation-name: glow;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
animation-duration: 3s;
animation-name: glow;
animation-iteration-count: infinite;
animation-play-state: running;
}
#someCol label.someCheckBox input {
position:absolute;
top:-20px;
}
#someCol label.someCheckBox input:checked + button {
background-color: #C0C0C0;
color: black;
border: 1px solid #606060;
box-shadow: 0 0 15px #C0C0C0;
-webkit-box-shadow: 0 0 15px #C0C0C0;
}
#someCol label.someCheckBox button {
width: 90px;
margin: 10px 0 0 4px;
}
It should be noted that I briefly tried updating one of these button/checkboxes to be a text label instead of a button, and the checkbox state did change as expected, however, I wanted the buttons for the look of the form, and I have many of these in place so it would take a lot of work to change them all...
likewise I preferred this approach originally because it reduced the need for JS making the forms more HTML only friendly, so although I can write a script to change the state of the checkbox, it doesn't serve my underlying purpose, and again it would take a lot of work to correct all the buttons set up this way when this worked previously.
since this did work previously and I've not touched the codebase for sometime, I'm not sure what changed other than browsers updating, can anyone assist as I've been tearing my hair out for hours now, and cannot figure out what changed...
Aucun commentaire:
Enregistrer un commentaire