<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: "👾";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.