1

Boa tarde! Estou editando uma loja OPENCART e preciso personalizar o input radio do tamanho do calçado, fazendo da seguinte maneira:

.input-option356 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.input-option356:after {
  content: "";
  clear: both;
}

.radio {
  border: 1px solid #ccc;
  box-sizing: border-box;
  float: left;
  height: 70px;
  position: relative;
  width: 120px;
}

.radio + .radio {
  margin-left: 25px;
}
.radio label {
  background: #fff no-repeat center center;
  bottom: 1px;
  cursor: pointer;
  display: block;
  left: 1px;
  position: absolute;
  right: 1px;
  text-indent: 100%;
  top: 1px;
  white-space: nowrap;
}

.radio label input[type=radio] {
  display: none;
}
.radio input:checked + label {
  outline: 4px solid #21b4d0;
  background-color: red;
}
<div id="input-option356"> 
<div class="radio">
    <label>
      <input type="radio" name="option[356]" value="288">
        44
    </label>
</div>
<div class="radio">
    <label>
      <input type="radio" name="option[356]" value="282">
        38
      </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="option[356]" value="283">
      39
  </label>
</div>

Ele esta desta maneira

inserir a descrição da imagem aqui

Preciso que ele mostre o input que esteja selecionado, porém não estou conseguindo. Alguém tem uma sugestão?

Tenho a intensão de ficar:

inserir a descrição da imagem aqui

Obrigado

2
  • Cara mas qual era exatamente a sua intenção? Como era para esse btn ficar como resultado final ?
    – hugocsl
    4/09/2020 às 18:36
  • @hugocsl editei a pergunta e coloquei como espero que fique 4/09/2020 às 18:43

1 Resposta 1

2

Cara o input:radio tem alguns atributos que vc pode customizar livremente. Mas a dica que te dou é inicialmente dar um all:unset nele, para limpar os estilos do user-agent, e depois vc customiza como quiser. Isso evita que vc tenha que fazer o hake de estilizar a label usando input+label,

Até pq no seu caso na daria certo, já que o input está dentro da label e não fora... Nesse exemplo vc não precisa usar ID no input, nem for na label :D

inserir a descrição da imagem aqui

Outro detalhe é que eu coloquei os números dentro de uma tag <span> isso facilita para vc aplicar estilo no texto depois que o input fica :checked. E coloquei display: flex na label para alinha o span dentro dela.

Segue o exemplo:

.input-option356 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.input-option356:after {
  content: "";
  clear: both;
}

.radio {
  border: 1px solid #ccc;
  box-sizing: border-box;
  float: left;
  height: 70px;
  position: relative;
  width: 120px;
}

.radio + .radio {
  margin-left: 25px;
}

.radio label {
  background: #fff no-repeat center center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

.radio label span {
  z-index: 1;
}
.radio label input[type=radio] {
  all: unset;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.radio label input[type=radio]:checked {
  background-color: red;
}
.radio label input[type=radio]:checked + span{
  color: #ffffff;
}
<div id="input-option356">
  <div class="radio">
    <label>
      <input type="radio" name="option[356]" value="288">
      <span>44</span>
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="option[356]" value="282">
      <span>38</span>
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="option[356]" value="283">
      <span>39</span>
    </label>
  </div>
</div>

3
  • isso mesmo! Vou dar uma olhada nos atributos que ele tem. Muito obrigado 4/09/2020 às 19:00
  • @CristianoFacirolli Isso ai, da uma olhada com calma ai, pq esses são conceitos que vão te ajudar em outras situações!
    – hugocsl
    4/09/2020 às 19:17
  • Com certeza! Muito obrigado =) 4/09/2020 às 19:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .