Olá pessoal!
Estou no início dos meus estudos de HTML, PHP e CSS e me encontro com uma dificuldade num código que não consigo arrumar.
Quero formatar a seguinte lista para os botões do radio-button ficarem mais bonitos, mas não consigo fazer aparecer a imagem correspondente:
<li class="box">
<input type=radio name=01 value=SeSe0b id="muitoincomodo01">
<label for="muitoincomodo01">Muito incômodo!</label>
</li>
O CSS para essa parte do código é o seguinte:
.box {
list-style: none;
margin: 0;
padding: 0;
}
.box:after {
content: "";
clear: both;
}
.box {
border: 1px solid #ccc;
box-sizing: border-box;
float: left;
height: 50px;
position: relative;
width: 100px;
}
.box + .box {
margin-left: 54px;
}
.box label {
background: #fff no-repeat center center;
bottom: 1px;
cursor: pointer;
display: block;
font-size: 0;
left: 1px;
position: absolute;
right: 1px;
text-indent: 100%;
top: 1px;
white-space: nowrap;
}
.muitoincomodo01 label {
background-image: url(images/muitoincomodo.jpg);
}
.box input:checked + label {
outline: 4px solid #21b4d0;
}
@-moz-document url-prefix() {
.box input:checked + label:after {
bottom: 0;
right: 0;
background-color: #21b4d0;
}
}
Estou certificado que o endereço da imagem está correto. Quando a coloco no bloco do .box label ela aparece em todas as listas, mas quando quero que ela fique na lista específica, como está no código acima, ela não aparece.
Alguém sabe como posso resolver isso? Obrigado.
