表單元素——checkbox樣式美化

一、背景

設計獅童鞋總是會設計各種高大上的效果圖，比如下面這個土豪金的效果。

該圖中“已閱讀并同意相關服務條款”前面的復選框有一個金色的邊框，打鉤時是一個金色的對勾。接下來說說怎樣實現(xiàn)該效果。

二、解決方法

1、純css解決方法

在css3 選擇器（三）一文中介紹過一個選擇器【:checked】選擇器。

單選按鈕和復選按鈕都有選中和未選中狀態(tài)。要設置這兩個按鈕默認樣式稍微復雜點。該文通過:checked選擇器配合其他表情實現(xiàn)自定義樣式。

舉例：使用:checked選擇器模擬實現(xiàn)復選框樣式。

<meta charset="utf-8">
<style type="text/css">
form {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  margin: 30px auto;
}

.wrapper {
  margin-bottom: 10px;
}

.box {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: relative;
  border: 2px solid orange;
  vertical-align: middle;
}

.box input {
  opacity: 0;
}

.box span {
  position: absolute;
  top: -10px;
  right: 3px;
  font-size: 30px;
  font-weight: bold;
  font-family: Arial;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  color: orange;
}

input[type="checkbox"] + span {
  opacity: 0;
}

input[type="checkbox"]:checked + span {
  opacity: 1;
}
</style>

<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="checkbox" checked="checked" id="username" /><span>√</span>
    </div>
    <label for="username">我是選中狀態(tài)</label>
  </div>
  
  <div class="wrapper">
    <div class="box">
      <input type="checkbox"  id="userpwd" /><span>√</span>
    </div>
    <label for="userpwd">我是未選中狀態(tài)</label>
  </div>
</form>

View Code

模擬實現(xiàn)一個選中和未選中的樣式。

沒有樣式時的效果圖如下，

最終添加樣式后效果如下。

實際開發(fā)中，我嘗試使用這種方法。

這種方法有個問題：點選框時無法選中，必須點文字才能選中。

這在實際應用中肯定是無法忍受的,實際應用中推薦第二種方法。

2、配合js解決方法

用到圖片：

原理：label和input外面套一層.custom-checkbox作為父元素相對定位。

input絕對定位于左上角，label也絕對定位于左上角，覆蓋input的方塊。通過給label設置padding-left和背景圖來模擬未選中狀態(tài)。選中時加一個.right類更改背景圖片為選中狀態(tài)的背景圖。

通過js點擊事件，label被點擊時在選中與未選中狀態(tài)切換。

<meta charset="utf-8"/>
<style type="text/css">
.custom-checkbox{
border:1px solid red;
position:relative;
height:30px;
}
.custom-checkbox input{
position:absolute;

}
.custom-checkbox label{
padding-left:20px;
position:absolute;
top:-1px;
left:0;
background:url(images/bg-unchecked.png) no-repeat top 4px left 3px;
}
.custom-checkbox label.right{
background:url(images/bg-checked.png) no-repeat top 2px left 3px;
}

</style>
<body>
<div class="custom-checkbox">
<input type="checkbox" id="test"/><label for="test">已閱讀并同意相關服務條款</label>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

 $('.custom-checkbox label').click(function(){
 if($(this).hasClass('right')){
 $('.custom-checkbox label').removeClass("right");
 }else{
 $('.custom-checkbox label').addClass("right");
 }
 });
</script>
</body>

問題：點擊頻率過快，會雙擊選中文字，影響用戶體驗。

解決辦法：

<label for="test" onselectstart="return false;" style="-moz-user-select:none;">已閱讀并同意相關服務條款</label>

效果：

3、配合js簡化版[update20161223]

2的方案用2次絕對定位有點麻煩，因為用了<input type="checkbox">的復選框，如果要求沒那么復雜，簡單用的<i>標簽模擬一下復選框也一樣可以實現(xiàn)效果。

效果：圖片：

html:

<label class="agree-label" onselectstart="return false;" style="-moz-user-select:none;">
        <i class="cus-checked"></i>同意&nbsp;<a href=":;" target="_blank">某某服務條款</a>
</label>

css:

    .agree-label {
        display: inline-block;
        font-size: 18px;
    }
    
    .agree-label i {
        display: inline-block;
        width: 21px;
        height: 22px;
        margin-bottom: -4px;
        margin-right: 6px;
        background: url(images/checkedbox.png) no-repeat;
    }
    
    .agree-label i.cus-checked {
        background-position: 0 -22px;
    }

js:

$('.agree-label').click(function() {
    if ($('.agree-label i').hasClass('cus-checked')) {
        $('.agree-label i').removeClass("cus-checked");
    } else {
        $('.agree-label i').addClass("cus-checked");
    }
});

三、總結

單選框樣式和復選框原理是類似的。上面辦法都是一種模擬實現(xiàn)。

正如我在::before和::after偽元素的用法一文中說過，早在10年我們會使用::before和::after來實現(xiàn)多背景圖片，現(xiàn)在css3多背景已成為標準；我們對復選框樣式的模擬實現(xiàn)也許會推動它成為標準，這也就是我們?yōu)楹笕俗龅呢暙I了，讓他們工作更輕松。

還有一點我想說的是推動前端技術發(fā)展的，不僅有前端同行們，還有我們可愛的設計師們。如果只有前端，我們會停留在已有技術的可行性上做一些保守的效果，但是有了設計師的“完美主義”，讓我們腦洞大開，挑戰(zhàn)自我，促進技術更上一層樓。

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內(nèi)容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉(zhuǎn)載注明出處：http://www.rzrgm.cn/starof/p/4904929.html有問題歡迎與我討論，共同進步。

posted @ 2015-10-27 12:51 starof 閱讀(16437) 評論(4) 收藏舉報

刷新頁面返回頂部

starof

我是你的驕傲嗎？