<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">

<form class=Form>
	<h1>Formulario: Checkbox</h1>
	<div class=l-container>
		<input id=checkbox1 class=Form-input type="checkbox">
		<label for=checkbox1 
					 class="Form-label  Form-label--checkbox">Pizza de Pastor</label>
		<input id=checkbox2 class=Form-input type="checkbox">
		<label for=checkbox2 class="Form-label  Form-label--checkbox">Pizza de Salchicha</label>
		<input id=checkbox3 class=Form-input type="checkbox">
		<label for=checkbox3 
					 class="Form-label  Form-label--checkbox">Pizza de Champiñones</label>
	</div>
	
	<h1>Formulario: Radio buttons</h1>
	<div class="l-container">
		<input class=Form-input id=radio1 name=radio type="radio">
		<label class="Form-label  Form-label--radio" for=radio1>text 1</label>
		<input class=Form-input id=radio2 name=radio type="radio">
		<label class="Form-label  Form-label--radio" for=radio2>text 2</label>
		<input class=Form-input id=radio3 name=radio type="radio">
		<label class="Form-label  Form-label--radio" for=radio3>text 3</label>
	</div>
</form>
*,
::after,
::before { box-sizing: border-box; } 
body {
	display: flex;
	
	width: 100vw;
	height: 100vh;
	background-color: #b2ebf2;
	font-family: roboto;
}
h1 {
	margin: 0;
	opacity: .38;
	font-weight: 500;
}
.l-container {
	display: flex;
	justify-content: space-between;
	
	padding: 1em;
	border-radius: 6px;
	background-color: #fff;
	box-shadow: rgba(0,0,0,.2) 0 2px 4px;
}
.l-container:not(:last-child) {
	margin-bottom: 2em;
}





.Form {
	--with: 1.8rem;
	
	margin: auto;
	padding: 1em;
	background: #e0f7fa;
	width: 40rem;
}
	.Form-label {
		display: flex;
		align-items: center;

		color: #00b8d4;
		font-weight: 400;
		transition: .3s;
	}
	.Form-label::before {
		content: "";
		display: flex;
		justify-content: center;
		align-items: center;
		/* 	display: inline-block; */
		margin-right: .2em;
		border: 2px solid;
		width: var(--with);
		height: var(--with);
	}
	.Form-label,
	.Form-input { cursor: pointer; }
	.Form-input { display: none; }

	.Form-label--checkbox::before {
		border-radius: 4px;
	}
	.Form-input:checked + .Form-label--checkbox {
		color: #e65100;
		font-weight: 500;
	}
	.Form-input:checked + .Form-label--checkbox::before {
		content: "🍕";
	}
	.Form-label--radio::before {
		border-radius: 50%;
	}
	.Form-input:checked + .Form-label--radio {
		color: #ad1457;
		font-weight: 500;
	}
	.Form-input:checked + .Form-label--radio::before {
		content: "👾";
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.