lundi 2 mars 2015

Button style based on checkbox, inside a table



I'm trying to make the background of a button change color, depending on the property of it's neighboring checkbox. But since I'm dependent on the HTML rendered by the questionnaire software I use, I'm unable to change the markup.


Let me show you what I mean:

![This the first situation: everything is OK here [1]http://ift.tt/1wDZyex

Upon clicking 1 of the 8 options, it get's highlighted. But once you click on the "next" button below, and then on the "back"button in the following screen you will encouter the following...


![D'oh!][2]http://ift.tt/1zzzHir

Here the option is still selected, but the button is no longer highlighted. This is a problem, as I want to hide the checkboxes later on.


I want to solve this problem using CSS only. However the checkbox and buttons are automatically placed inside a table. The table uses the following structure:



<table>
<tr>
<td class="checkbox">
<input type="checkbox">
</td>
<td class="item">
<span class="Option">
<a href="">Answer</a>
</span>
</td>
</tr>
</table>


I've tried using:

input[type=checkbox]:checked + a{background-color:red;}


This only works when checkbox and answer button are siblings. Hope you can help me with this...


Aucun commentaire:

Enregistrer un commentaire