CSS3 自定义单选框及其教程

CSS3，界面组件，单选框

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2274
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Cabin:700);
/* HTML5 Boilerplate accessible hidden styles */

[type="radio"] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
/* One radio button per line */

label {
    display: block;
    cursor: pointer;
    line-height: 2.5;
    font-size: 1.5em;
}
[type="radio"] + span {
    display: block;
}
/* the basic, unchecked style */

[type="radio"] + span:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.25em;
    border-radius: 1em;
    border: 0.125em solid #fff;
    box-shadow: 0 0 0 0.15em #000;
    margin-right: 0.75em;
    transition: 0.5s ease all;
}
/* the checked style using the :checked pseudo class */

[type="radio"]:checked + span:before {
    background: green;
    box-shadow: 0 0 0 0.25em #000;
}
/* never forget focus styling */

[type="radio"]:focus + span:after {
    content: '\0020\2190';
    font-size: 1.5em;
    line-height: 1;
    vertical-align: -0.125em;
}
/* Nothing to see here. */

body {
    margin: 3em auto;
    max-width: 30em;
    font-family: Cabin, serif;
}
fieldset {
    font-size: 1em;
    border: 2px solid #000;
    padding: 2em;
    border-radius: 0.5em;
}
legend {
    color: #fff;
    background: #000;
    padding: 0.25em 1em;
    border-radius: 1em;
}
.p {
    text-align: center;
    font-size: 14px;
    padding-top: 120px;
}

HTML

CSS3，界面组件，单选框

编辑器支持Emmet

快捷键

CSS3，界面组件，单选框

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：