Stylized Radio Input Does Not Pass Post

Asked

Viewed 68 times

1

Opa,

I have some radio buttos via css are exchanged for colors.

<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
    }

Only when sending the post, the selected radio button does not come if you remove the class radio-cores of div, they come in the post normally.

.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>

javascript html

  • The display is None because?

  • stylization of the input, as said the same should be exchanged for a color div, in case what appears selectable is the label class

2 answers

2

Do not use display:none and yes 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>

Source

0


The exact solution I found, I verified that the use of visibility: hidden; does not display the radio, but, its space remains hidden, not being ideal in relation to layout.

Using: 

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

Is perfect

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.