Radio Button customizado

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

5 curtidas

Posta aí um print pra gente ver como fica :joy:

4 curtidas

Muito bom!

FontAwesome, como o nome diz, é incrível! Senti falta dela no Fluig.

Ultimamente eu tenho utilizado bastante, no Fluig, Switch, Custom-Checkbox e Custom-Radio. Eles já dão uma cara muito melhor ao padrão que o navegador tem.

1 curtida

eu tenho usado bastante a SKIN FLAT nos ambientes que atuo.
acho que o form tem que ser o mais intuitivo possível pro usuario.