html怎么更改单选框样式,input radio,改装input单选框样式，单选框input修改默认样式...

HTML

CSS3实现自定义Checkbox动画DEMO演示

rel="stylesheet"

href="css/style.css"

media="screen"

type="text/css"

/>

Check it out!

CSS

/* Made by Jimmy Gillam */

html,

body {

padding: 0;

margin: 0;

background-color: #667788;

color: #efefef;

font-family: 'Open Sans';

}

.container {

box-sizing: border-box;

padding: 25px;

text-align: center;

}

.container h2 {

margin-bottom: 40px;

}

/* Checkmark style starts */

@-moz-keyframes dothabottomcheck {

0% {

height: 0;

}

100% {

height: 50px;

}

}

@-webkit-keyframes dothabottomcheck {

0% {

height: 0;

}

100% {

height: 50px;

}

}

@keyframes dothabottomcheck {

0% {

height: 0;

}

100% {

height: 50px;

}

}

@keyframes dothatopcheck {

0% {

height: 0;

}

50% {

height: 0;

}

100% {

height: 120px;

}

}

@-webkit-keyframes dothatopcheck {

0% {

height: 0;

}

50% {

height: 0;

}

100% {

height: 120px;

}

}

@-moz-keyframes dothatopcheck {

0% {

height: 0;

}

50% {

height: 0;

}

100% {

height: 120px;

}

}

input[type='checkbox'] {

display: none;

}

.check-box {

height: 100px;

width: 100px;

background-color: transparent;

border: 10px solid black;

border-radius: 5px;

position: relative;

display: inline-block;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

-moz-transition: border-color ease 0.2s;

-o-transition: border-color ease 0.2s;

-webkit-transition: border-color ease 0.2s;

transition: border-color ease 0.2s;

cursor: pointer;

}

.check-box::before,

.check-box::after {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

position: absolute;

height: 0;

width: 20px;

background-color: #34b93d;

display: inline-block;

-moz-transform-origin: left top;

-ms-transform-origin: left top;

-o-transform-origin: left top;

-webkit-transform-origin: left top;

transform-origin: left top;

border-radius: 5px;

content: ' ';

-webkit-transition: opacity ease 0.5;

-moz-transition: opacity ease 0.5;

transition: opacity ease 0.5;

}

.check-box::before {

top: 72px;

left: 41px;

box-shadow: 0 0 0 5px #667788;

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

-ms-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

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

transform: rotate(-135deg);

}

.check-box::after {

top: 37px;

left: 5px;

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

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

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

transform: rotate(-45deg);

}

input[type='checkbox']:checked + .check-box,

.check-box.checked {

border-color: #34b93d;

}

input[type='checkbox']:checked + .check-box::after,

.check-box.checked::after {

height: 50px;

-moz-animation: dothabottomcheck 0.2s ease 0s forwards;

-o-animation: dothabottomcheck 0.2s ease 0s forwards;

-webkit-animation: dothabottomcheck 0.2s ease 0s forwards;

animation: dothabottomcheck 0.2s ease 0s forwards;

}

input[type='checkbox']:checked + .check-box::before,

.check-box.checked::before {

height: 120px;

-moz-animation: dothatopcheck 0.4s ease 0s forwards;

-o-animation: dothatopcheck 0.4s ease 0s forwards;

-webkit-animation: dothatopcheck 0.4s ease 0s forwards;

animation: dothatopcheck 0.4s ease 0s forwards;

}

效果图 自己可以根据需要修改样式