Ir para conteúdo
Fórum Script Brasil
  • 0

Dúvida background-image CSS


Jean Goetten

Pergunta

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.

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...