java单选框背景图挡住,使用CSS3/SVG/背景图片定制单选框按钮风格

CSS

语言：

CSSSCSS

确定

body {

font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;

}

.box {

width: 50%;

height: 500px;

float: left;

text-align: center;

}

.box.blue {

background: #00a0c0;

}

.box.green {

background: #289c5f;

}

.box.dark-blue {

background: #28367f;

}

.box.orange {

background: #f68647;

}

h1 {

display: block;

font-size: 22px;

color: #fff;

margin: 10% 0 18% 0;

}

h2 {

display: block;

font-size: 15px;

color: #fff;

margin: 10% 0 18% 0;

/* hide checkbox and radio inputs from modern browsers */

}

body:not(#foo) input[type='checkbox'] {

opacity: 0;

}

body:not(#foo) input[type='radio'] {

opacity: 0;

/* set default styles for the checkboxes and radio buttons */

}

body:not(#foo) .checkbox,

.radiobtn {

width: 100px;

height: 100px;

display: inline-block;

margin: 0 10% 0 auto;

cursor: pointer;

-webkit-filter: drop-shadow(11px 10px 14px rgba(0, 0, 0, 0.25));

-moz-filter: drop-shadow(11px 10px 14px rgba(0, 0, 0, 0.25));

filter: drop-shadow(11px 10px 14px rgba(0, 0, 0, 0.25));

position: relative;

}

.blue label span.checkbox {

background: url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/checkbox.png) 0px 0px;

}

.blue input[type='checkbox']:checked + label span.checkbox {

background: url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/checkbox.png) 0px -110px;

}

.blue label span.radiobtn {

background: url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/radiobtn.png) 0px 0px;

}

.blue input[type='radio']:checked + label span.radiobtn {

background: url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/radiobtn.png) 0px -110px;

}

.green label span.checkbox {

background: #ecf0f1 url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/checkbox_transparent.png);

}

.green input[type='checkbox']:checked + label span.checkbox {

background: #ecf0f1 url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/checkbox_transparent.png);

}

.green label span.radiobtn {

background: #ecf0f1 url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/radio_transparent.png);

border-radius: 100px;

}

.green input[type='radio']:checked + label span.radiobtn {

background: #ecf0f1 url(http://www.8bit-code.com/demos/styling-checkboxes-and-radio-buttons-with-css-embed/img/radio_transparent.png);

}

.dark-blue input[type='checkbox'] + label span.checkbox {

background: #ecf0f1;

}

.dark-blue input[type='checkbox']:checked + label span.checkbox:after {

content: "";

position: absolute;

top: 43px;

left: 26px;

width: 14px;

height: 38px;

background: #95a5a6;

z-index: 1;

-webkit-transform: rotate(-44deg);

-moz-transform: rotate(-44deg);

transform: rotate(-44deg);

border-radius: 2px;

}

.dark-blue input[type='checkbox']:checked + label span.checkbox:before {

content: "";

position: absolute;

top: 22px;

right: 34px;

width: 14px;

height: 62px;

background: #95a5a6;

z-index: 1;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

transform: rotate(45deg);

border-radius: 2px;

}

.dark-blue input[type='radio'] + label span.radiobtn {

background: #ecf0f1;

border-radius: 100px;

}

.dark-blue input[type='radio']:checked + label span.radiobtn:after {

content: "";

position: absolute;

top: 37px;

right: 35px;

width: 30px;

height: 30px;

background: #95a5a6;

z-index: 1;

border-radius: 30px;

}

.orange label span.checkbox {

background: #ecf0f1;

padding: 18px 13px 13px 13px;

width: 74px !important;

height: 69px !important;

}

.orange label span.checkbox svg {

display: none;

}

.orange input[type='checkbox']:checked + label span.checkbox svg {

display: block;

}

.orange input[type='radio'] + label span.radiobtn {

background: #ecf0f1;

border-radius: 100px;

}

.orange label span.radiobtn svg {

display: none;

}

.orange input[type='radio']:checked + label span.radiobtn svg {

display: block;

/*

Simple CSS reset

*/

}

* {

margin: 0;

padding: 0;

/*

CSS Styles for the upper navigation

*/

}

#navigation {

width: 100%;

height: 65px;

background: #f0f0f0;

margin: 0;

border-bottom: 1px solid #dadada;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.go-back {

float: left;

margin-top: 25px;

margin-left: 10px;

}

.go-back a {

text-decoration: none;

font-size: 18px;

color: #747474;

}

.go-back a:hover {

color: #464646;

}

.article-title {

float: left;

margin-left: 50px;

margin-top: 18px;

}

.article-title a {

text-decoration: none;

font-size: 25px;

color: #5c5c5c;

}

.article-title a:hover {

color: #464646;

}