A pseudo-classe
:checked
de um seletor CSS representa um elemento radio (<input type="radio">
), checkbox (<input type="checkbox">
) ou option (<option>
em um<select>
) que está marcada ou alternado para um estado ligado. Quando um input é checado, ele recebe as características que você quiser. Usando o+ label
, retornamos apenas o primeiro objeto imediatamente ao redor deste input. Isso significa que o seletor irá retornar o label imediatamente ao lado de um input que está selecionado.
Basta um pequenino CSSExemplo 1
:checked + label {
display :none;
}
<div class="fomulario">
<form class="avlac" id="avlac" name="avlac">
<input type="radio" id="mtruim" name="av1" value="Muito Ruim">
<label for="mtruim"><img name="imgl" id="img1" src="https://i.sstatic.net/E2xBV.png"></label>
<input type="radio" id="ruim" name="av1" value="Ruim">
<label for="ruim"><img name="imgl" id="img2" src="https://i.sstatic.net/2nfI1.png"></label>
<input type="radio" id="maisoumenos" name="av1" value="Mais ou Menos">
<label for="maisoumenos"><img name="imgl" id="img3" src="https://i.sstatic.net/OBecB.png"></label>
<input type="radio" id="bom" name="av1" value="Bom">
<label for="bom"><img name="imgl" id="img4" src="https://i.sstatic.net/Javo4.png"></label>
<input type="radio" id="mtbom" name="av1" value="Muito Bom">
<label for="mtbom"><img name="imgl" id="img5" src="https://i.sstatic.net/dz7Wr.png"></label>
<input type="radio" id="otimo" name="av1" value="Otimo">
<label for="otimo"><img name="imgl" id="img6" src="https://i.sstatic.net/xJC07.png"></label>
<input type="button" name="envio" value="ENVIAR" onclick="enviar1()">
</form>
</div>
Exemplo 2
:checked + label {
font: italic bold 20px Georgia, serif;
color:red;
}
<div class="fomulario">
<form class="avlac" id="avlac" name="avlac">
<input type="radio" id="mtruim" name="av1" value="Muito Ruim">
<label for="mtruim">muito ruim</label>
<input type="radio" id="ruim" name="av1" value="Ruim">
<label for="ruim">ruim</label>
<input type="radio" id="maisoumenos" name="av1" value="Mais ou Menos">
<label for="maisoumenos">mais ou menos</label>
<input type="radio" id="bom" name="av1" value="Bom">
<label for="bom">bom</label>
<input type="radio" id="mtbom" name="av1" value="Muito Bom">
<label for="mtbom">muito bom</label>
<input type="radio" id="otimo" name="av1" value="Otimo">
<label for="otimo">otimo</label>
<input type="button" name="envio" value="ENVIAR" onclick="enviar1()">
</form>
</div>