一款纯CSS自定义多列选择框（radio & checkbox）

JS代码只是用来显示一个弹出提示框

css3, radio, checkbox

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var showAlert = true;

// for radio
$('input[type="radio"]').on('change', (event) => {
    const name = event.target.name;
    const value = event.target.value;
    if (!showAlert) return;
    // print
    swal({
        title: name,
        type: 'success',
        html: 'value: <strong>' + value + '</strong>',
        confirmButtonText: 'okay'
    })
});

// for checkbox
$('input[type="checkbox"]').on('change', (event) => {
    const name = event.target.name;
    const values = [];
    $('input[name="' + name + '"]:checked').each((index, input) => {
        values.push($(input).val());
    });
    if (!showAlert) return;
    // print
    if (values.length) {
        swal({
            title: event.target.name,
            type: 'success',
            html: 'value: <strong>' + JSON.stringify(values) + '</strong>',
            confirmButtonText: 'okay'
        })
    } else {
        swal({
            title: event.target.name,
            type: 'warning',
            html: 'Please choose a social',
            confirmButtonText: 'okay'
        })
    }
});

// enable / disabled alert
$('#toggle-alert').on('click', () => {
    if (showAlert) {
        $('#toggle-alert span').text('ON alert');
    } else {
        $('#toggle-alert span').text('OFF alert');
    }
    showAlert = showAlert ? false : true;
})

编译

CSS

body,
html {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    min-height: inherit;
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
    letter-spacing: 0.5px;
    background: -webkit-linear-gradient(315deg, #ff5f6d 20%, #ffc371 80%);
    background: linear-gradient(135deg, #ff5f6d 20%, #ffc371 80%);
    color: #fff;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
}
* {
    padding: 0px;
    margin: 0px;
}
h1 {
    font-size: 6em;
    font-weight: 700 !important;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.02), 2px 2px rgba(0, 0, 0, 0.02), 3px 3px rgba(0, 0, 0, 0.02), 4px 4px rgba(0, 0, 0, 0.02), 0.125rem 0.125rem rgba(0, 0, 0, 0.02), 6px 6px rgba(0, 0, 0, 0.02), 7px 7px rgba(0, 0, 0, 0.02), 8px 8px rgba(0, 0, 0, 0.02), 9px 9px rgba(0, 0, 0, 0.02), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.02), 11px 11px rgba(0, 0, 0, 0.02), 12px 12px rgba(0, 0, 0, 0.02), 13px 13px rgba(0, 0, 0, 0.02), 14px 14px rgba(0, 0, 0, 0.02), 0.625rem 0.625rem rgba(0, 0, 0, 0.02), 16px 16px rgba(0, 0, 0, 0.02), 17px 17px rgba(0, 0, 0, 0.02), 18px 18px rgba(0, 0, 0, 0.02), 19px 19px rgba(0, 0, 0, 0.02), 1.25rem 1.25rem rgba(0, 0, 0, 0.02);
}
h4,
h5 {
    margin-top: 1em;
    letter-spacing: 3px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 100%;
    font-weight: normal;
}
p {
    font-size: 0.875em;
    margin-bottom: 1em;
    line-height: 160%;
}
#toggle-alert {
    position: fixed;
    z-index: 1000;
    right: 1.5em;
    top: 1.5em;
    display: block;
    border: 1px solid #fff;
    padding: 1em 1.8em;
    font-size: 0.6125em;
    border-radius: 100em;
    cursor: pointer;
    -webkit-transition: .3s ease-out all;
    transition: .3s ease-out all;
}
#toggle-alert i {
    margin-right: 0.7em;
    line-height: 100%;
    opacity: .7;
    font-size: 1rem;
}
#toggle-alert:hover {
    border-color: #ffc371;
    color: #ffc371;
}
.responsive {
    width: 100%;
    height: 100%;
    overflow-x: auto;
}
.collapses {
    display: table;
    border-collapse: collapse;
    width: 100%;
    height: inherit;
    table-layout: fixed;
}
.collapses > .option {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-property: background;
    transition-property: background;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.collapses > .option > input[type="radio"],
.collapses > .option > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.collapses > .option > input[type="radio"]:hover,
.collapses > .option > input[type="radio"]:checked,
.collapses > .option > input[type="checkbox"]:hover,
.collapses > .option > input[type="checkbox"]:checked {
    cursor: pointer !important;
}
.collapses > .option > input[type="radio"]:hover ~ .option-content,
.collapses > .option > input[type="radio"]:checked ~ .option-content,
.collapses > .option > input[type="checkbox"]:hover ~ .option-content,
.collapses > .option > input[type="checkbox"]:checked ~ .option-content {
    width: 100%;
    -webkit-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
}
.collapses > .option > input[type="radio"]:checked ~ .checked-bg,
.collapses > .option > input[type="checkbox"]:checked ~ .checked-bg {
    opacity: 1;
    box-shadow: inset 0px 0px 3em -1.2em rgba(0, 0, 0, 0.5);
}
.collapses > .option > input[type="radio"]:active ~ .option-content,
.collapses > .option > input[type="checkbox"]:active ~ .option-content {
    -webkit-transform: scale(1.15, 1.15);
    transform: scale(1.15, 1.15);
}
.collapses > .option > .option-content {
    position: relative;
    z-index: 1;
    cursor: pointer !important;
    width: 100%;
    height: inherit;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-property: background, padding, -webkit-transform, -webkit-transform;
    transition-property: background, padding, -webkit-transform, -webkit-transform;
    transition-property: transform, background, padding, transform;
    transition-property: transform, background, padding, transform, -webkit-transform, -webkit-transform;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}
.collapses > .option > .checked-bg {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    background-color: rgba(0, 0, 0, 0.1);
}

HTML

<div class="responsive">
    <div class="collapses">
        <label class="option">
            <input type="radio" name="company" value="apple" checked>
            <div class="option-content">
                <h1 class="animated bounceIn"><i class="ion-social-apple-outline"></i></h1>
                <h4>APPLE</h4>
                <h4><i class="ion-android-radio-button-on"></i></h4>
            </div>
            <div class="checked-bg"></div>
        </label>
        <label class="option">
            <input type="radio" name="company" value="facebook">
            <div class="option-content">
                <h1 class="animated bounceIn"><i class="ion-social-facebook-outline"></i></h1>
                <h4>FACEBOOK</h4>
                <h4><i class="ion-android-radio-button-on"></i></h4>
            </div>
            <div class="checked-bg"></div>
        </label>
        <label class="option">
            <input type="checkbox" name="social" value="tumblr" checked>
            <div class="option-content">
                <h1 class="animated bounceIn"><i class="ion-social-tumblr-outline"></i></h1>
                <h4>TUMBLR</h4>
                <h4><i class="ion-android-checkbox-outline"></i></h4>
            </div>
            <div class="checked-bg"></div>
        </label>
        <label class="option">
            <input type="checkbox" name="social" value="twitter">
            <div class="option-content">
                <h1 class="animated bounceIn"><i class="ion-social-twitter-outline"></i></h1>
                <h4>TWITTER</h4>
                <h4><i class="ion-android-checkbox-outline"></i></h4>
            </div>
            <div class="checked-bg"></div>
        </label>
    </div>
</div>

<a id="toggle-alert"><i class="ion-ios-chatboxes"></i><span>OFF Alert</span></a>
<script src='https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.3/sweetalert2.min.js'></script>

JS代码只是用来显示一个弹出提示框

css3, radio, checkbox

编辑器支持Emmet

快捷键

JS代码只是用来显示一个弹出提示框

css3, radio, checkbox

使用CSS3 placeholder-shown过滤器（选择器）实现的浮动输入框标签

使用CSS3背景裁剪（background-clip）特性实现的文本标题透视特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：