1

Opa,

Tenho uns radio buttos que via css são trocados por cores.

<div class="radio-cores">
    <input type="radio" name="cor" value="1" />
    <label class="product-color-blue"></label>              

    <input type="radio" name="cor" value="2" />
    <label class="product-color-grey"></label>  

    <input type="radio" name="cor" value="3" />
    <label class="product-color-red"></label>   

    <input type="radio" name="cor" value="4" />
    <label class="product-color-green"></label> 

</div>

O CSs

    .radio-cores input[type="radio"] {
        display: none;
    }

    .radio-cores label {
        display: inline-block;
        color:#fff;
        padding: 4px 11px;
        font-family: Arial;
        font-size: 16px;
        cursor: pointer;
        margin:3px;
        border:1px solid #cecece
    }

Só que ao enviar o post, o radio button selecionado não vem, se remover a classe radio-cores da div, eles vem no post normalmente.

.radio-cores input[type="radio"] {
        display: none;
    }

    .radio-cores label {
        display: inline-block;
        color:#fff;
        padding: 4px 11px;
        font-family: Arial;
        font-size: 16px;
        cursor: pointer;
        margin:3px;
        border:1px solid #cecece
    }
    
.product-color-blue {
  background-color: blue;
}

.product-color-grey {
  background-color: grey;
}

.product-color-red {
  background-color: red;
}

.product-color-green {
  background-color: green;
}
<form method="post" action="salva.php" enctype="multipart/form-data">
  <div class="radio-cores">
      <input type="radio" name="cor" value="1" />
      <label class="product-color-blue"></label>              

      <input type="radio" name="cor" value="2" />
      <label class="product-color-grey"></label>  

      <input type="radio" name="cor" value="3" />
      <label class="product-color-red"></label>   

      <input type="radio" name="cor" value="4" />
      <label class="product-color-green"></label> 

  </div>
</form>

2
  • O display está none porque? Commented 23/06/2017 às 15:23
  • estilização do input, como disse o mesmo deve ser trocado por uma div com cor, no caso o que aparece selecionavel é a classe do label
    – sNniffer
    Commented 23/06/2017 às 15:24

2 Respostas 2

2

Não use display:none e sim visibility: hidden;

.radio-cores input[type="radio"] {
        visibility: hidden;
    }

    .radio-cores label {
        display: inline-block;
        color:#fff;
        padding: 4px 11px;
        font-family: Arial;
        font-size: 16px;
        cursor: pointer;
        margin:3px;
        border:1px solid #cecece
    }
    
.product-color-blue {
  background-color: blue;
}

.product-color-grey {
  background-color: grey;
}

.product-color-red {
  background-color: red;
}

.product-color-green {
  background-color: green;
}
<form method="post" action="salva.php" enctype="multipart/form-data">
  <div class="radio-cores">
      <input type="radio" name="cor" value="1" />
      <label class="product-color-blue"></label>              

      <input type="radio" name="cor" value="2" />
      <label class="product-color-grey"></label>  

      <input type="radio" name="cor" value="3" />
      <label class="product-color-red"></label>   

      <input type="radio" name="cor" value="4" />
      <label class="product-color-green"></label> 

  </div>
</form>

Fonte

0

A solução exata que encontrei, verifiquei que o uso do visibility: hidden; não exibe o radio, mas, seu espaço continua oculpado, não sendo o ideal em relação a layout.

Usando:

    .radio-cores input[type="radio"] {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        opacity: 0;
    }

Está perfeito

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 .