CSS3定制Checkbox, Radio Input 和 Select元素效果

利用CSS3的一些属性来为传统的HTML Checkbox, Radio, Select 元素增加一些动效

CSS3

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 6030
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    padding: 1em;
}
input[type="checkbox"],
input[type="radio"] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
input[type="checkbox"]:focus + label:before,
input[type="checkbox"]:hover + label:before,
input[type="radio"]:focus + label:before,
input[type="radio"]:hover + label:before {
    border-color: black;
}
input[type="checkbox"]:active + label:before,
input[type="radio"]:active + label:before {
    -webkit-transition-duration: 0;
    transition-duration: 0;
    -webkit-filter: brightness(0.2);
    filter: brightness(0.2);
}
input[type="checkbox"] + label,
input[type="radio"] + label {
    position: relative;
    padding: 10px;
    padding-left: 2em;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
    box-sizing: content-box;
    content: '';
    color: #900;
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    margin-top: -9px;
    border: 2px solid grey;
    text-align: center;
}
input[type="checkbox"] + label:after,
input[type="radio"] + label:after {
    box-sizing: content-box;
    content: '';
    background-color: #900;
    position: absolute;
    top: 50%;
    left: 4px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition: -webkit-transform 200ms ease-out;
    transition: -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out;
    transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
}
input[type="checkbox"] + label:after {
    background-color: transparent;
    top: 50%;
    left: 4px;
    width: 8px;
    height: 3px;
    margin-top: -4px;
    border-style: solid;
    border-color: #900;
    border-width: 0 0 3px 3px;
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    -webkit-transform: rotate(-45deg) scale(0);
    transform: rotate(-45deg) scale(0);
    -webkit-transition: none;
    transition: none;
}
input[type="checkbox"]:checked + label:after {
    content: '';
    -webkit-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
    -webkit-transition: -webkit-transform 200ms ease-out;
    transition: -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out;
    transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
}
input[type="radio"]:checked + label:before {
    -webkit-animation: borderscale 300ms ease-in;
    animation: borderscale 300ms ease-in;
    background-color: white;
}
input[type="radio"]:checked + label:after {
    -webkit-transform: scale(1);
    transform: scale(1);
}
input[type="radio"] + label:before,
input[type="radio"] + label:after {
    border-radius: 50%;
}
input[type="checkbox"]:checked + label:before {
    -webkit-animation: borderscale 200ms ease-in;
    animation: borderscale 200ms ease-in;
}
input[type="checkbox"]:checked + label:after {
    -webkit-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}
@-webkit-keyframes borderscale {
    50% {
        box-shadow: 0 0 0 2px #900;
    }
}
@keyframes borderscale {
    50% {
        box-shadow: 0 0 0 2px #900;
    }
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%228%22%20viewBox%3D%220%200%2016%208%22%3E%3Cpolygon%20fill%3D%22%234D4D4D%22%20points%3D%228%2C0%2016%2C0%2012%2C4%208%2C8%204%2C4%200%2C0%20%22/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    border: 2px solid grey;
    border-radius: 0;
    padding: 0.25em 0.4em;
    padding-right: 1.5em;
}
select:focus,
select:hover {
    border-color: black;
    outline: none;
}
select:active {
    border-color: #900;
}
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
.error-msg {
    display: block;
    color: red;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 500ms ease-out;
    transition: max-height 500ms ease-out;
    will-change: max-height;
}
:required:not(:focus) ~ .error-msg,
:invalid:required ~ .error-msg {
    max-height: 9em;
}
input:focus {
    border: 1px solid black;
}
input:not(:focus):invalid {
    border: 1px solid red;
    outline: none;
}
input:not(:focus):valid {
    border: 1px solid green;
}
* {
    box-sizing: border-box;
}
form ul {
    list-style: none;
}
label {
    cursor: pointer;
    display: inline-block;
}

HTML

<form action="">
    <fieldset class="options">
        <legend>Radio</legend>
        <ul>
            <li>
                <input id="radio1" name="radio" type="radio" class="radio" checked="checked">
                <label for="radio1">Option 1</label>
            </li>
            <li>
                <input id="radio2" name="radio" type="radio" class="radio">
                <label for="radio2">Option 2</label>
            </li>
            <li>
                <input id="radio3" name="radio" type="radio" class="radio">
                <label for="radio3">Option 3</label>
            </li>
        </ul>
    </fieldset>
    <fieldset class="options">
        <legend>Checkbox</legend>
        <ul>
            <li>
                <input id="checkbox1" name="checkbox" type="checkbox" checked="checked">
                <label for="checkbox1">Choice A</label>
            </li>
            <li>
                <input id="checkbox2" name="checkbox" type="checkbox">
                <label for="checkbox2">Choice B</label>
            </li>
            <li>
                <input id="checkbox3" name="checkbox" type="checkbox">
                <label for="checkbox3">Choice C</label>
            </li>
        </ul>
    </fieldset>
    
    <fieldset>
        <legend>Select</legend>
        <ul>
            <li>
                <select>
                    <optgroup label="Option Group 1">
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </optgroup>
                    <optgroup label="Option Group 2">
                        <option>Option 3</option>
                    </optgroup>
                </select>
            </li>
        </ul>
    </fieldset>
</form>

利用CSS3的一些属性来为传统的HTML Checkbox, Radio, Select 元素增加一些动效

CSS3

编辑器支持Emmet

快捷键

利用CSS3的一些属性来为传统的HTML Checkbox, Radio, Select 元素增加一些动效

CSS3

CSS3使用background-clip属性实现文本裁剪效果

CSS3 Flat和preserve-3d两种transform-style属性效果的演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：