Skip to content

Instantly share code, notes, and snippets.

@maxcraftsman
Last active April 11, 2018 05:21
Show Gist options
  • Select an option

  • Save maxcraftsman/9d32e75c4e61430d3bc556275f05ea73 to your computer and use it in GitHub Desktop.

Select an option

Save maxcraftsman/9d32e75c4e61430d3bc556275f05ea73 to your computer and use it in GitHub Desktop.
Checkboxes styles
<div class="input-line">
<input id="checkbox" type="checkbox">
<label for="checkbox"><span></span>Для всех типов</label>
</div>
<style>
.input-line input[type="radio"] + label span {
border: 1px solid #c6c6c6;
border-radius: 50%;
width: 16px;
height: 16px;
display: inline-block;
position: relative;
margin-bottom: -3px;
margin-right: 10px;
}
.input-line input {
display: none;
}
.input-line label {
text-transform: none;
line-height: 20px;
margin: 0;
float: left;
display: inline-block;
margin-right: 40px;
white-space: nowrap;
}
.input-line input[type="checkbox"] + label span {
border: 1px solid #c6c6c6;
width: 16px;
height: 16px;
display: inline-block;
position: relative;
margin-bottom: -3px;
margin-right: 10px;
}
.input-line input[type="checkbox"]:checked + label span:after {
background-color: #ff6965;
display: inline-block;
width: 10px;
height: 10px;
left: 2px;
top: 2px;
position: absolute;
cursor: pointer;
content: "";
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment