How to position required message?

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>

No CSS did so:

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

With this, I can " Hide " Radio Buttons and style with more CSS of course, labels to stay in place of the radio búttons and I can still have the full functioning of required .

The problem is that since I've placed radio buttons off the screen and therefore your message will stay on and will not be seen.

Is it possible to only change the position of the require message over the label and keep the radio button hidden?