您的位置：首页 > Web前端 > CSS

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

2017-12-22 22:46 681 查看
做毕设果然是道阻且长QAQ，在用到一个复选框的时候由于嫌弃复选框实在太丑了，就自己做了一个。其中没有用到任何图片，用css和jQuery实现。

废话不多说直接看最后效果：



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>
。

小三角的实现在之前做提示框的时候就详细说明过了，主要是设置
wid
1077f
th
和
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航