Is there any way to position the required message?

Question

I have the following html

<ul class="pagamento-metodos">
   <li class="pagamento-metodo paypal">
     <input name="payment_methods" type="radio" id="paypal" value="paypal" required>
     <label for="paypal"></label>
   </li>
   <li class="pagamento-metodo pagseguro">
     <input name="payment_methods" type="radio" id="pagseguro" value="pagseguro">
     <label for="pagseguro"></label>
   </li>
   <li class="pagamento-metodo boleto">
     <input name="payment_methods" type="radio" id="boleto" value="boleto">
     <label for="boleto"></label>
   </li>
</ul>

In the CSS did so:

input[type=radio] {
    left:-100px;
    position:absolute;
}

With that, I can "hide" the Radio Buttons and stylize with more CSS of course, the Labels to take the place of radio buds and I can still fully function required.

The problem is, how I positioned the radio Buttons off the screen and therefore your message will also stay and will not be seen.

It is possible to change only the positioning of the require over the label and maintain its own radio button hidden?

Answer 1

All it will take is one opacity: 0; in the inputs and change the position of the Abels to go to their place, they continued there but did not occupy space, and even with the label you will be able to select it because it is present. Look at this jsfiddle - https://jsfiddle.net/goqkkfz8/1/