Open mhulse opened 7 years ago
FontAwesome demo:
FontAwesome CDN link:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
With big button boxes:
label {
cursor: pointer;
cursor: hand;
}
/*
Simple use of Font Awesome icons for checkbox and radio options:
<label>
<input type="checkbox" value="">
<span>Here’s option two.</span>
</label>
OR:
<input type="checkbox" id="foo" value="">
<label for="foo">Label</label>
*/
input[type="radio"],
input[type="checkbox"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
input[type="checkbox"] + label,
input[type="checkbox"] + span,
input[type="radio"] + label,
input[type="radio"] + span {
padding-left: 1.4em;
display: inline-block;
position: relative;
cursor: pointer;
cursor: hand;
}
input[type="checkbox"] + label::before,
input[type="checkbox"] + span::before,
input[type="radio"] + label::before,
input[type="radio"] + span::before {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: larger;
line-height: 1.2;
letter-spacing: .05em;
width: 1.2em;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
input[type="checkbox"] + label,
input[type="checkbox"] + span,
input[type="radio"] + label,
input[type="radio"] + span { margin-left: 10px; }
input[type="checkbox"] + label::before,
input[type="checkbox"] + span::before { content: "\f096"; }
input[type="checkbox"]:checked + label::before,
input[type="checkbox"]:checked + span::before { content: "\f046"; }
input[type="radio"] + label::before,
input[type="radio"] + span::before { content: "\f10c"; }
input[type="radio"]:checked + label::before,
input[type="radio"]:checked + span::before { content: "\f192"; }
input[type=checkbox]:focus + label,
input[type=checkbox]:focus + span,
input[type=checkbox]:focus + label::before,
input[type=checkbox]:focus + span::before,
input[type=radio]:focus + label,
input[type=radio]:focus + span,
input[type=radio]:focus + label::before,
input[type=radio]:focus + span::before {
color: #138d9c;
}
input[type=checkbox]:checked + label,
input[type=checkbox]:checked + span,
input[type=checkbox]:checked + label::before,
input[type=checkbox]:checked + span::before,
input[type=radio]:checked + label,
input[type=radio]:checked + span,
input[type=radio]:checked + label::before,
input[type=radio]:checked + span::before { color: #138d9c; }
/*--------------------------------------------------------------------*/
input[type="checkbox"] + label::before,
input[type="checkbox"] + span::before {
content: '\f1db';
left: 10px;
}
input[type="checkbox"] + label,
input[type="checkbox"] + span {
color: #138d9c;
text-align: center;
width: auto;
max-width: 100%;
background: rgba(19, 141, 156, .2);
margin: 0;
padding: 20px 20px 20px 45px;
display: block;
}
input[type="checkbox"] + label::-moz-selection,
input[type="checkbox"] + span::-moz-selection {
background: rgba(0, 0, 0, 0);
}
input[type="checkbox"] + label::selection,
input[type="checkbox"] + span::selection {
background: rgba(0, 0, 0, 0);
}
input[type="checkbox"]:checked + label::before,
input[type="checkbox"]:checked + span::before {
content: '\f00c';
}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:checked + span,
input[type="checkbox"]:checked + label:hover,
input[type="checkbox"]:checked + span:hover {
background: #fff;
-webkit-box-shadow: inset 0 0 0 2px #138d9c;
-moz-box-shadow: inset 0 0 0 2px #138d9c;
box-shadow: inset 0 0 0 2px #138d9c;
}
A little more cleaned up:
/*
<input type="checkbox" id="foo" value="">
<label for="foo">Label</label>
*/
label {
cursor: pointer;
cursor: hand;
}
input[type="checkbox"],
input[type="radio"] {
display: none;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
color: #138d9c;
padding-left: 1.4em;
display: inline-block;
position: relative;
cursor: pointer;
cursor: hand;
}
input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
font-family: "Font Awesome 5 Pro";
font-style: normal;
font-weight: 400;
font-size: 2.8rem;
line-height: 1.2;
letter-spacing: .05em;
width: 1.2em;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
color: #138d9c;
line-height: 1.4;
width: auto;
max-width: 100%;
margin-top: 0.5rem;
padding: 0.8rem 0.8rem 0.8rem 4.5rem;
display: block;
}
input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
content: '\f111';
left: 0.5rem;
}
input[type="checkbox"]:checked + label::before,
input[type="radio"]:checked + label::before {
content: "\f058";
}
input[type="checkbox"]:focus + label,
input[type="checkbox"]:focus + label::before,
input[type="radio"]:focus + label,
input[type="radio"]:focus + label::before {
color: #138d9c;
}
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label:hover,
input[type="radio"]:checked + label:hover {
color: #4a320d;
background: #fca92d;
border-radius: 0.25rem;
}
input[type="checkbox"] + label::-moz-selection,
input[type="radio"] + label::-moz-selection {
background: rgba(0, 0, 0, 0);
}
input[type="checkbox"] + label::selection,
input[type="radio"] + label::selection {
background: rgba(0, 0, 0, 0);
}
<form class="avr_form" method="post" action="/report/something-wrong/">
<fieldset>
<legend>Where did this happen?</legend>
<input type="checkbox" id="report_where_building" name="report_where_building" value="1">
<label for="report_where_building">In the building</label>
<label class="avr_util-off">Describe the location …</label>
<textarea placeholder="Describe the location …" id="report_where_text" name="report_where_text"></textarea>
</fieldset>
<fieldset>
<legend>How did this make you feel?</legend>
<input type="checkbox" id="report_feel_other" name="report_feel_other" value="1">
<label for="report_feel_other" class="avr_extra">
Other
<span>
<img src="/assets/images/emoji/other.png" width="40">
</span>
</label>
<label class="avr_util-off">Type here …</label>
<textarea placeholder="Type here …" id="report_feel_text" name="report_feel_text"></textarea>
</fieldset>
</form>