用input输入框实现好看的复选框效果（css+jq）

来源：互联网发布：淘宝运营策划编辑：程序博客网时间：2024/06/05 16:27

做毕设果然是道阻且长QAQ，在用到一个复选框的时候由于嫌弃复选框实在太丑了，就自己做了一个。其中没有用到任何图片，用css和jQuery实现。
废话不多说直接看最后效果：
multi-select
html元素的设计如下：

<form action="" method="post">    <div class="multi-select">        <input name="welfare" class="in" readonly="readonly" />        <div class="triangle"></div>    </div>    <ul class="multi-select-sub" style="display: none;">        <li class="multi-select-ele">test1<div class="not-display-check"></div></li>        <li class="multi-select-ele">test2<div class="not-display-check"></div></li>        <li class="multi-select-ele">test3<div class="not-display-check"></div></li>        <li class="multi-select-ele">test4<div class="not-display-check"></div></li>    </ul></form>

<input/> 设置为只读，不允许用户输入，最终选择结果会显示在输入框中，如果选择的内容很多，建议直接使用<textarea>。
小三角的实现在之前做提示框的时候就详细说明过了，主要是设置width和height为0，用一条边的边框就可以模拟。
对勾的实现与小三角的思想类似：通过不同的高宽，同时设置两条相邻的边为透明，在进行旋转就可以得到一个类似对勾。
css代码如下：

.triangle {    display: inline-block;    width: 0;    height: 0;    border: 10px solid #808080;    border-color: #808080 transparent transparent transparent;    position: absolute;    top: 10px;    right: 8px;}div.display-check {    position: absolute;    right: 10px;    top: 10px;    width: 10px;    height: 3px;    border: 5px solid black;    border-color: transparent transparent #AAA #AAA;    border-radius: 10px;    transform:rotate(-45deg);    -ms-transform:rotate(-45deg);   /* IE 9 */    -moz-transform:rotate(-45deg);  /* Firefox */    -webkit-transform:rotate(-45deg); /* Safari 和 Chrome */    -o-transform:rotate(-45deg);    /* Opera */}

整个复选框的交互都由jQuery来实现，具体完整代码如下：

<!DOCTYPE html><html><head>    <title>jquery下拉选择框</title>    <style type="text/css">        /* 多选输入显示框样式 */        .multi-select {            margin-top: 20px;            position: relative;            width: 300px;        }        input.in {            display: inline-block;            box-sizing: border-box;            height: 30px;            width: 300px;            outline: none;            /* border: none; */        }        input.in:focus {            outline: none;        }        .triangle {            display: inline-block;            width: 0;            height: 0;            border: 10px solid #808080;            border-color: #808080 transparent transparent transparent;            position: absolute;            top: 10px;            right: 8px;        }           .rotate-180 {            transform-origin:center 25%; //旋转中心正中间            transform: rotate(180deg);            -webkit-transform: rotate(180deg);            -moz-transform: rotate(180deg);            -ms-transform: rotate(180deg);            -o-transform: rotate(180deg);            transition: transform 0.2s;            -moz-transition: -moz-transform 0.2s;             -moz-transition: -moz-transform 0.2s;             -o-transition: -o-transform 0.2s;             -ms-transition: -ms-transform 0.2s;         }        .rotate180 {            transform-origin:center 25%;            transform: rotate(0deg);            -webkit-transform: rotate(0deg);            -moz-transform: rotate(0deg);            -ms-transform: rotate(0deg);            -o-transform: rotate(0deg);            transition: transform 0.2s;            -moz-transition: -moz-transform 0.2s;             -moz-transition: -moz-transform 0.2s;             -o-transition: -o-transform 0.2s;             -ms-transition: -ms-transform 0.2s;         }        /* 多选下拉框样式 */        ul.multi-select-sub {            list-style-type: none;            border: 1px solid #AAA;            box-sizing: border-box;            width: 300px;            margin-top: -2px;            padding: 0px;        }        li {            padding: 10px;            box-sizing: border-box;            width: 100%;            position: relative;        }        li:hover {            background-color: #56718F;        }        /* 显示对勾 */        div.display-check {            position: absolute;            right: 10px;            top: 10px;            width: 10px;            height: 3px;            border: 5px solid black;            border-color: transparent transparent #AAA #AAA;            border-radius: 10px;            transform:rotate(-45deg);            -ms-transform:rotate(-45deg);   /* IE 9 */            -moz-transform:rotate(-45deg);  /* Firefox */            -webkit-transform:rotate(-45deg); /* Safari 和 Chrome */            -o-transform:rotate(-45deg);    /* Opera */        }    </style>    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>    <script type="text/javascript">        $(document).ready(function() {            var welfareArr = [];            $(".multi-select").click(function(event) {                /* 小箭头旋转 */                if($(".triangle").hasClass('rotate180')) {                    $(".triangle").removeClass('rotate180');                    $(".triangle").addClass('rotate-180');                }                else if($(".triangle").hasClass('rotate-180')) {                    $(".triangle").removeClass('rotate-180');                    $(".triangle").addClass('rotate180');                }                else {                    $(".triangle").addClass('rotate-180');                }                /* 显示下拉框 */                if($(".multi-select-sub").css('display') == "none"){                    $(".multi-select-sub").css('display', 'block');                }                else {                    $(".multi-select-sub").css('display', 'none');                }            });             $("li.multi-select-ele").click(function(event) {                // 当元素已经被选取过了，再次点击即取消选取                if($(this).hasClass('selected')){                    // 设置元素className                    $(this).removeClass('selected');                    // 隐藏表示选中的原点                    $(this).find('.display-check').attr("class", "not-display-check");                    // 从数组中删除对应元素                    // 按照常理，列表中的内容应该都是不一致的，所以这里简单的根据内容删除                    welfareArr.splice($.inArray($(this).text(), welfareArr), 1);                }                else{                    $(this).addClass('selected');                    $(this).find(".not-display-check").attr("class", "display-check");                    welfareArr.push($(this).text());                }                $("input.in").val(welfareArr.join(','));            });        });    </script></head><body>    <form action="" method="post">        <div class="multi-select">            <input name="welfare" class="in" readonly="readonly" />            <div class="triangle"></div>        </div>        <ul class="multi-select-sub" style="display: none;">            <li class="multi-select-ele">test1<div class="not-display-check"></div></li>            <li class="multi-select-ele">test2<div class="not-display-check"></div></li>            <li class="multi-select-ele">test3<div class="not-display-check"></div></li>            <li class="multi-select-ele">test4<div class="not-display-check"></div></li>        </ul>    </form></body></html>

阅读全文

0 0