Label, input radio et focus.

Bonjour,

Je suis conscient qu'il y a des solutions javascripts simples pour faire ce que je veux mais j'aimerais priorisé le CSS si c'est possible de le faire de cette façon.

J'ai donc des input radio et ils sont cachés par soucis d'esthétique. Cependant, il est possible de les sélectionner grâce à leur label ( s'ils sont bien associés ). Lorsque l'on click sur le label, même caché, le input choisi est le bon. Cependant, j'aimerais avoir un effet visuel sur le label associé au input.

J'ai essayé avec la pseud-classe :focus mais le focus n'est jamais vraiment sur le label lui-même puisque si on click dessus, c'est le input radio qui a le focus ( et c'est normal ).

Est-ce qu'il y a d'autres alternatives CSS avant javascript?

<style>
	label { display:block; width:300px; height:30px; background:#CCCCCC; margin:5px 0; }
	input { display:none; }
</style>

<label for="chat">Chat</label>
    <input type="radio" checked="checked" value="chat" id="chat" name="animaux">
    <label for="chien">Chien</label>
    <input type="radio" checked="" value="chien" id="chien" name="animaux">
    <label for="cochon">Cochon</label>
    <input type="radio" checked="" value="cochon" id="cochon" name="animaux">
    <label for="cheval">Cheval</label>
    <input type="radio" checked="" value="cheval" id="cheval" name="animaux">

Donc en concret, ce serait de faire en sorte que le background des labels changent quand on click sur un de ceux là.

Merci.