Eu tenho uma loja virtual no qual ela gera o seguinte HTML de um select
que tem imagem dentro dele. Eu gostaria de esconder o input
(bolinha do select radio) e exibir apenas uma borda na imagem que for selecionada que irá corresponder ao select
selecionado.
Importante
Os input
radio serão gerados automaticamente na loja com um html
idêntico a este, a diferença será que em cada produto o nome do input
será diferente, nestes meus exemplos tem os nomes option[238]
e option[239]
. Porém a loja irá gerar mais outros, como option[240]
, option[241]
...
Uma resposta abaixo do @Mateus Veloso me ajudou se em meu código tivesse apenas um input radio
com suas devidas opções. Porém meu caso terá mais de input radio
. Com isso a solução dele deixa apenas o último input radio
marcado com a borda e os outros inputs
com suas devidas opções não fica visível qual foi a escolha do usuário. Veja aqui a demonstração.
Os input
serão de seleção única, porém terão mais de um inpupt radio
cada um com suas opções podendo somente uma delas ser marcada. Exemplo, existe o input radio
"Cor Palmilha" com suas respectivas cores (somente uma delas pode ser marcada), depois tem "Cor Solado" com suas respectivas cores e assim vai. O fato é que eles não terão um nome definido, serão gerados automaticamente. No link de exemplo que coloquei, o "Cor Palmilha" tem name="option[238]"
mas poderá ter outro nome.
Aqui você consegue ver o código em funcionamento:
#product .radio {
display: inline-block;
margin-right:10px;
}
.radio {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.radio input[type=radio] {
position: absolute;
margin-top: 4px\9;
margin-left: -20px;
}
#product .radio label {
display: block;
background: none;
color: #111111;
text-align: center;
border: none;
padding: 0;
font-size:0;
}
#product .radio label input {
margin-left: 15px;
}
<div id="product">
<div class="form-group required">
<label class="control-label">Cor Palmilha</label>
<div id="input-option238">
<div class="radio">
<label>
<input type="radio" name="option[238]" value="56">
<img src="https://s19.postimg.org/krdm2veer/cor-produto-cinza.jpg" alt="Cinza" class="img-thumbnail">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[238]" value="55">
<img src="https://s19.postimg.org/da4ennovn/cor-produto-verde.jpg" alt="Verde" class="img-thumbnail">
</label>
</div>
</div>
</div>
<div class="form-group required">
<label class="control-label">Cor Solado</label>
<div id="input-option239">
<div class="radio">
<label>
<input type="radio" name="option[239]" value="66">
<img src="https://s19.postimg.org/krdm2veer/cor-produto-cinza.jpg" alt="Cinza" class="img-thumbnail">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[239]" value="67">
<img src="https://s19.postimg.org/da4ennovn/cor-produto-verde.jpg" alt="Verde" class="img-thumbnail">
</label>
</div>
</div>
</div>
</div>
inpupt radio
cada um com suas opções podendo somente uma delas ser marcada. Exemplo, existe oinput radio
"Cor Palmilha" com suas respectivas cores (somente uma delas pode ser marcada), depois tem "Cor Solado" com suas respectivas cores e assim vai. O fato é que eles não terão um nome definido, serão gerados automaticamente. No link de exemplo que coloquei, o "Cor Palmilha" temname="option[238]"
mas poderá ter outro nome.