-
-
Save osben/ceadf97e76b5b6f5d7f27ecf4d46d061 to your computer and use it in GitHub Desktop.
css3-radios
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.css3-radios label { | |
display: inline-block; | |
vertical-align: middle; | |
} | |
.css3-radios input[type="radio"] + span { | |
display: inline-block; | |
vertical-align: middle; | |
} | |
.css3-radios input[type="radio"] + span::before { | |
display: inline-block; | |
vertical-align: middle; | |
} | |
.css3-checkboxes label { | |
display: inline-block; | |
vertical-align: middle; | |
} | |
.css3-checkboxes input[type="checkbox"] + span { | |
display: inline-block; | |
vertical-align: middle; | |
} | |
.css3-checkboxes input[type="checkbox"] + span::before { | |
display: inline-block; | |
vertical-align: middle; | |
} | |
.css3-radios, .css3-checkboxes { | |
position: relative; | |
} | |
.css3-radios label *, .css3-checkboxes label * { | |
cursor: pointer; | |
} | |
.css3-radios input[type="radio"], .css3-checkboxes input[type="checkbox"] { | |
opacity: 0; | |
position: absolute; | |
} | |
.css3-radios input[type="radio"] + span, .css3-checkboxes input[type="checkbox"] + span { | |
font-size: 12px; | |
color: #333; | |
} | |
.css3-radios label:hover span::before, .css3-checkboxes label:hover span::before { | |
-moz-box-shadow: 0 0 2px #ccc; | |
-webkit-box-shadow: 0 0 2px #ccc; | |
box-shadow: 0 0 2px #ccc; | |
} | |
.css3-radios label:hover span { | |
color: #000; | |
} | |
.css3-checkboxes label:hover span { | |
color: #000; | |
} | |
.css3-checkboxes input[type="checkbox"] + span::before { | |
content: ""; | |
width: 14px; | |
height: 14px; | |
margin: -3px 9px 0 0; | |
border: solid 1px #000; | |
line-height: 14px; | |
text-align: center; | |
background: #fff; | |
} | |
.css3-radios input[type="radio"] + span::before { | |
content: ""; | |
width: 14px; | |
height: 14px; | |
margin: 1px 7px 0 0; | |
border: solid 1px #000; | |
line-height: 14px; | |
text-align: center; | |
background: #fff; | |
float: left; | |
border-radius: 50%; | |
} | |
.css3-radios input[type="radio"]:checked + span::before { | |
color: #666; | |
} | |
.css3-checkboxes input[type="checkbox"]:checked + span::before { | |
color: #666; | |
} | |
.css3-radios input[type="radio"]:disabled + span { | |
cursor: default; | |
-moz-opacity: .4; | |
-webkit-opacity: .4; | |
opacity: .4; | |
} | |
.css3-checkboxes input[type="checkbox"]:disabled + span { | |
cursor: default; | |
-moz-opacity: .4; | |
-webkit-opacity: .4; | |
opacity: .4; | |
} | |
.css3-checkboxes input[type="checkbox"] + span::before { | |
-moz-border-radius: 2px; | |
-webkit-border-radius: 2px; | |
border-radius: 2px; | |
} | |
.css3-radios input[type="radio"]:checked + span::before { | |
background-color: #000; | |
font-size: 16px; | |
line-height: 10px; | |
} | |
.css3-checkboxes input[type="checkbox"]:checked + span::before { | |
font-size: 14px; | |
content: "✔"; | |
color: #000; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="css3-radios"> | |
<div> | |
<label> | |
<input type="radio" name="radio" value="1" checked id=""> | |
<span>Курьерская доставка по Москве</span> | |
</label> | |
</div> | |
<div> | |
<label> | |
<input type="radio" name="radio" value="0" id=""> | |
<span>Курьерская доставка по Москве</span> | |
</label> | |
</div> | |
</div> | |
<div class="css3-checkboxes"> | |
<div> | |
<label> | |
<input type="checkbox" name="" value="1" checked id=""> | |
<span>Курьерская доставка по Москве</span> | |
</label> | |
</div> | |
<div> | |
<label> | |
<input type="checkbox" name="" value="1" id=""> | |
<span>Курьерская доставка по Москве</span> | |
</label> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment