用input輸入框實現好看的複選框效果（css+jq）
阿新 • • 發佈：2019-01-09
做畢設果然是道阻且長QAQ，在用到一個複選框的時候由於嫌棄複選框實在太醜了，就自己做了一個。其中沒有用到任何圖片，用css和jQuery實現。
廢話不多說直接看最後效果：
html元素的設計如下：
<form action="" method="post">
<div class="multi-select">
<input name="welfare" class="in" readonly="readonly" />
<div class="triangle"></div>
</div <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>