Tem um site onde o cliente deverá escolher uma cor
e tamanho
para determinado produto, o que tenho hoje são divs que mostram as cores e tamanhos mas não estou conseguindo deixar a opção marcada
quando a mesma for selecionada, como radios.
Preciso dos valores para uma checagem quando os mesmos não forem marcados.
Os css são esses:
.tovar_color_select {padding-bottom:19px;} .tovar_color_select p { margin-bottom:13px; text-transform:uppercase; font-weight:900; font-size:12px; color:#333; } .tovar_color_select a { position:relative; display:inline-block; margin-right:10px; width:32px; height:22px; } .tovar_color_select a:before { content:''; position:absolute; left:-4px; top:-4px; right:-4px; bottom:-4px; border:1px solid #e9e9e9; transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; } .tovar_color_select a:hover:before, .tovar_color_select a.active:before { border:2px solid #333; } .tovar_size_select {padding-bottom:25px;} .tovar_size_select p { margin-bottom:9px; text-transform:uppercase; font-weight:900; font-size:12px; color:#333; } .tovar_size_select span { float:right; display:block; line-height:18px; font-size:12px; color:#666; } .tovar_size_select a { display:inline-block; width:40px; height:30px; margin:0 1px 5px; text-align:center; line-height:28px; font-size:11px; color:#666; border:1px solid #e9e9e9; transition: color 0.3s ease-in-out, border-color 0.2s ease-in-out; -webkit-transition: color 0.3s ease-in-out, border-color 0.2s ease-in-out; } .tovar_size_select a:hover, .tovar_size_select a.active { line-height:26px; color:#333; border:2px solid #333; }
O que tenho até agora é isso:
<div class="tovar_color_select">
<p>SELECIONE A COR</p>
<?php foreach($ResCor as $ProdCor) { ?>
<a IdCor="<?php echo $ProdCor->IdCor; ?>" style="background-color:<?php echo $ProdCor->Cor ?>;" ></a>
<?php } ?>
</div>
<div class="tovar_size_select">
<div class="clearfix">
<p class="pull-left">SELECIONE O TAMANHO</p>
</div>
<?php foreach($ResTamanho as $ProdTam) { ?>
<a IdTamanho="<?php echo $ProdTam->IdTamanho; ?>" ><?php echo $ProdTam->Nome; ?></a>
<?php } ?>
</div>
O que estou tentando fazer é o que está nesse link: Modelo
O meu site é esse: Site