Stylized Input Radio does not pass Post

Question

Stylized Input Radio does not pass Post

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

Opa,

I have a radio butt that via css are exchanged for color.

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

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

.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

asked by anonymous 23.06.2017 / 17:20

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>

Font

23.06.2017 / 17:41

Order of execution of unit tests Open site by Google gives error 500 [closed]

score 0 · Accepted Answer

The exact solution I found, I noticed that the use of visibility: hidden; does not display the radius, but its space is still hidden, not ideal for layout.

Using:

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

It's perfect