Bom dia dica de estilização de componente radiobutton
css do radio button
.flex{
display: flex;
}
.rinput{
-webkit-appearance:none;
}
.rlabel{
height: 70px;
width: 100px;
border:2px solid #18f98d;
position: relative;
margin: auto;
border-radius: 10px;
color: #18f98d;
transition: 0.5s;
background-color: #f7f7f7;
}
.fa{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-80%);
}
label > span{
font-size: 20px;
position: absolute;
top:10%;
left: 50%;
transform: translate(-50%,80%);
font-family: "Poppins",sans-serif;
font-weight: 500;
}
input[type="radio"]:checked + label{
background-color: #18f98d !important;
color: white;
box-shadow: 0 15px 45px rgba(24,249,141,0.2);
}
<div class="row">
<div class="col-md-12 flex">
<input type="radio" name="revisar" id="sim" class="rinput" value="SIM">
<label for="sim" class="rlabel">
<i class="fa fa-check fa-2x" aria-hidden="true"></i>
<span>Sim</span>
</label>
<input type="radio" name="revisar" id="nao" class="rinput" value="NAO">
<label for="nao" class="rlabel">
<i class="fa fa-times-circle fa-2x" aria-hidden="true"></i>
<span>Não</span>
</label>
</div>
</div>
Como funciona o componente:
<div class="col-md-12 flex">
essa linha recebe a classe FLEX responsavel pelo alinhamento dos radiobutton
<input type="radio" name="revisar" id="sim" class="rinput" value="SIM">
Essa linha recebe a classe rinput um value e um id (muito importante esse id) ele vai ser referenciado no label for
<label for="sim" class="rlabel">
A propriedade label for deve ser informada com o id do radiobutton caso contrario o click não vai funcionar
Com isso você passa a ter um radiobutton todo estilizado.
<i class="fa fa-times-circle fa-2x" aria-hidden="true"></i>
Usei aqui o fontawesome biblioteca similar ao fluigicon mas muito mais poderosa.
Qualquer duvida pergunte!!!
