input[type=checkbox]またはinput[type=radio]スタイル変更
1918 ワード
input[type=checkbox]{
-webkit-appearance: none; -moz-appearance: none; appearance: none;
position: relative; width: 20px; height: 20px; background:#fff; border:1px solid #d8d8d8;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;outline: none;cursor: pointer;
vertical-align: middle;
}
/*content: '√';*/
input[type=checkbox]:after{
content:''; position: absolute;display: block;width: 100%; height: 100%;
color: #333; text-align: center;line-height: 18px;
background: url('https://static.98ep.com/img/BigCompany/a.png') no-repeat center;
-webkit-transition: all ease-in-out 100ms;
-moz-transition: all ease-in-out 100ms;
transition: all ease-in-out 100ms;
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; opacity: 0;}
input[type=checkbox]:checked:after{-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;opacity: 1;
}
input[type=radio]{
-webkit-appearance: none; -moz-appearance: none; appearance: none;
position: relative; display: inline-block; vertical-align: middle;width: 16px; height: 16px;
border: 1px solid #00ccde; outline: none; cursor: pointer;
-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
}
input[type=radio]:after{
content: ''; position: absolute; width: 8px;height:8px;display: block; left: 0; top: 0; right: 0; bottom: 0;
margin: auto;background: #00ccde;-webkit-border-radius:8px;-moz-border-radius: 8px; border-radius: 8px;
-webkit-transform: scale(0); -moz-transform: scale(0);transform: scale(0);
-webkit-transition : all ease-in-out 100ms;-moz-transition : all ease-in-out 100ms;
transition : all ease-in-out 100ms;}
input[type=radio]:checked:after{-webkit-transform: scale(1);-moz-transform: scale(1); transform: scale(1);
}