Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- CSS checkbox styling
- <ul class="imageless-css-3-form-elements" style="list-style-type: none">
- <li><label><input type="checkbox" class="public"><span style="color:#fff">PUBLIC</span></label></li>
- <li><label><input type="checkbox" class="private"><span style="color:#fff">PRIVATE</span></label></li>
- <li><label><input type="checkbox" class="semi-p"><span style="color:#fff">SEMI-PRIVATE</span></label></li>
- <li><label><input type="checkbox" class="grouped"><span style="color:#fff">GROUPED</span></label></li>
- </ul>
- .imageless-css-3-form-elements label
- {
- cursor: hand;
- cursor: pointer;
- }
- .imageless-css-3-form-elements label input[type="checkbox"],
- .imageless-css-3-form-elements label input[type="radio"],
- .imageless-css-3-form-elements label input[type="checkbox"] + span,
- .imageless-css-3-form-elements label input[type="radio"] + span,
- .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
- .imageless-css-3-form-elements label input[type="radio"] + span::before
- {
- vertical-align: middle;
- }
- .imageless-css-3-form-elements label input[type="checkbox"],
- .imageless-css-3-form-elements label input[type="radio"]
- {
- position: absolute;
- filter: alpha(opacity=0);
- -moz-opacity: 0;
- -webkit-opacity: 0;
- opacity: 0;
- }
- .imageless-css-3-form-elements label input[type="checkbox"] + span,
- .imageless-css-3-form-elements label input[type="radio"] + span,
- .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
- .imageless-css-3-form-elements label input[type="radio"] + span::before
- {
- display: inline-block;
- }
- .imageless-css-3-form-elements label input[type="checkbox"] + span,
- .imageless-css-3-form-elements label input[type="radio"] + span
- {
- font: normal 13px/14px "Segoe UI", Sans-serif;
- font-weight: 900;
- }
- .imageless-css-3-form-elements label input[type="checkbox"] + span::before
- {
- content: "2714";
- font-weight: 900;
- }
- .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
- .imageless-css-3-form-elements label input[type="radio"] + span::before
- {
- text-indent: -9999px;
- width: 12px;
- height: 12px;
- font: 12px/12px Garamond, "Segoe UI", Sans-serif;
- font-weight: 900;
- text-transform: uppercase;
- border: solid 1px #0b70cd;
- border-radius: 3px;
- box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
- background: #78CCBB;/*#0b70cd;*/
- /*background: -moz-linear-gradient(-45deg, #fefefe, #0b70cd);
- background: -webkit-linear-gradient(-45deg, #fefefe, #0b70cd);
- background: -o-linear-gradient(-45deg, #fefefe, #0b70cd);
- background: -ms-linear-gradient(-45deg, #fefefe, #0b70cd);
- background: linear-gradient(-45deg, #fefefe, #0b70cd);*/
- margin: 0 7px 4px 0;
- }
- .imageless-css-3-form-elements label:hover input[type="checkbox"]:not(:disabled) + span::before,
- .imageless-css-3-form-elements label:hover input[type="radio"]:not(:disabled) + span::before
- {
- background: #78CCBB; /*#0b70cd;*/
- /*background: -moz-linear-gradient(45deg, #fefefe, #0b70cd);
- background: -webkit-linear-gradient(45deg, #fefefe, #0b70cd);
- background: -o-linear-gradient(45deg, #fefefe, #0b70cd);
- background: -ms-linear-gradient(45deg, #fefefe, #0b70cd);
- background: linear-gradient(45deg, #fefefe, #0b70cd);*/
- box-shadow: 0 0 1px 2px #78CCBB; /*#ccc*/
- }
- .imageless-css-3-form-elements label input[type="checkbox"]:checked + span::before,
- .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
- {
- text-indent: 2px;
- color: #fff;
- text-shadow: 0 0 2px #0b70cd;
- font-weight: 900;
- }
- .imageless-css-3-form-elements label input[type="radio"] + span::before
- {
- content: "2022";
- font-size: 22px;
- -moz-border-radius: 12px;
- -webkit-border-radius: 12px;
- border-radius: 12px;
- }
- .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
- {
- text-indent: 2px;
- }
- .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
- .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
- {
- filter: alpha(opacity=50);
- -moz-opacity: .5;
- -webkit-opacity: .5;
- opacity: .5;
- }
- .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span,
- .imageless-css-3-form-elements label input[type="radio"]:disabled + span,
- .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
- .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
- {
- cursor: default;
- }
- .public_li{background-color:#78CCBB;}
- .private_li{ background-color:#A62929}
- .semi-p_li{background-color:#78CCBB;}
- .grouped_li{ background-color:#A62929}
- <ul class="imageless-css-3-form-elements" style="list-style-type: none">
- <li class="public_li"> <label><input type="checkbox" class="public"><span style="color:#fff">PUBLIC</span></label></li>
- <li class="private_li"><label><input type="checkbox" class="private"><span style="color:#fff">PRIVATE</span></label></li>
- <li class="semi-p_li"><label><input type="checkbox" class="semi-p"><span style="color:#fff">SEMI-PRIVATE</span></label></li>
- <li class="grouped"><label><input type="checkbox" class="grouped"><span style="color:#fff">GROUPED</span></label></li>
- </ul>
- .imageless-css-3-form-elements label
- {
- cursor: hand;
- cursor: pointer;
- }
- .imageless-css-3-form-elements label input[type="checkbox"],
- .imageless-css-3-form-elements label input[type="radio"],
- .imageless-css-3-form-elements label input[type="checkbox"] + span,
- .imageless-css-3-form-elements label input[type="radio"] + span,
- .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
- .imageless-css-3-form-elements label input[type="radio"] + span::before
- {
- vertical-align: middle;
- }
- .imageless-css-3-form-elements label input[type="checkbox"],
- .imageless-css-3-form-elements label input[type="radio"]
- {
- position: absolute;
- filter: alpha(opacity=0);
- -moz-opacity: 0;
- -webkit-opacity: 0;
- opacity: 0;
- }
- .imageless-css-3-form-elements label input[type="checkbox"] + span,
- .imageless-css-3-form-elements label input[type="radio"] + span,
- .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
- .imageless-css-3-form-elements label input[type="radio"] + span::before
- {
- display: inline-block;
- }
- .imageless-css-3-form-elements label input[type="checkbox"] + span,
- .imageless-css-3-form-elements label input[type="radio"] + span
- {
- font: normal 13px/14px "Segoe UI", Sans-serif;
- font-weight: 900;
- }
- .imageless-css-3-form-elements label input[type="checkbox"] + span::before
- {
- content: "2714";
- font-weight: 900;
- }
- .imageless-css-3-form-elements label input[type="checkbox"].public + span::before,
- .imageless-css-3-form-elements label input[type="radio"] + span::before
- {
- text-indent: -9999px;
- width: 12px;
- height: 12px;
- font: 12px/12px Garamond, "Segoe UI", Sans-serif;
- font-weight: 900;
- text-transform: uppercase;
- border: solid 1px #0b70cd;
- border-radius: 3px;
- box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
- background: #78CCBB;/*#0b70cd;*/
- margin: 0 7px 4px 0;
- }
- .imageless-css-3-form-elements label input[type="checkbox"].private + span::before,
- .imageless-css-3-form-elements label input[type="radio"] + span::before
- {
- text-indent: -9999px;
- width: 12px;
- height: 12px;
- font: 12px/12px Garamond, "Segoe UI", Sans-serif;
- font-weight: 900;
- text-transform: uppercase;
- border: solid 1px #0b70cd;
- border-radius: 3px;
- box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
- background: #A62929;/*#0b70cd;*/
- margin: 0 7px 4px 0;
- }
- .imageless-css-3-form-elements label input[type="checkbox"].semi-p + span::before,
- .imageless-css-3-form-elements label input[type="radio"] + span::before
- {
- text-indent: -9999px;
- width: 12px;
- height: 12px;
- font: 12px/12px Garamond, "Segoe UI", Sans-serif;
- font-weight: 900;
- text-transform: uppercase;
- border: solid 1px #0b70cd;
- border-radius: 3px;
- box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
- background: #FFD996;/*#0b70cd;*/
- margin: 0 7px 4px 0;
- }
- .imageless-css-3-form-elements label input[type="checkbox"].grouped + span::before,
- .imageless-css-3-form-elements label input[type="radio"] + span::before
- {
- text-indent: -9999px;
- width: 12px;
- height: 12px;
- font: 12px/12px Garamond, "Segoe UI", Sans-serif;
- font-weight: 900;
- text-transform: uppercase;
- border: solid 1px #0b70cd;
- border-radius: 3px;
- box-shadow: 0 0 1px 1px #78CCBB; /*#ccc*/
- background: #81A2CF;/*#0b70cd;*/
- margin: 0 7px 4px 0;
- }
- .imageless-css-3-form-elements label:hover input[type="checkbox"]:not(:disabled) + span::before,
- .imageless-css-3-form-elements label:hover input[type="radio"]:not(:disabled) + span::before
- {
- background: #78CCBB; /*#0b70cd;*/
- /*background: -moz-linear-gradient(45deg, #fefefe, #0b70cd);
- background: -webkit-linear-gradient(45deg, #fefefe, #0b70cd);
- background: -o-linear-gradient(45deg, #fefefe, #0b70cd);
- background: -ms-linear-gradient(45deg, #fefefe, #0b70cd);
- background: linear-gradient(45deg, #fefefe, #0b70cd);*/
- box-shadow: 0 0 1px 2px #78CCBB; /*#ccc*/
- }
- .imageless-css-3-form-elements label input[type="checkbox"]:checked + span::before,
- .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
- {
- text-indent: 2px;
- color: #fff;
- text-shadow: 0 0 2px #0b70cd;
- font-weight: 900;
- }
- .imageless-css-3-form-elements label input[type="radio"] + span::before
- {
- content: "2022";
- font-size: 22px;
- -moz-border-radius: 12px;
- -webkit-border-radius: 12px;
- border-radius: 12px;
- }
- .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
- {
- text-indent: 2px;
- }
- .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
- .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
- {
- filter: alpha(opacity=50);
- -moz-opacity: .5;
- -webkit-opacity: .5;
- opacity: .5;
- }
- .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span,
- .imageless-css-3-form-elements label input[type="radio"]:disabled + span,
- .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
- .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
- {
- cursor: default;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement