表單元素——checkbox樣式美化

時間 2019-11-05

標籤表單元素 checkbox 樣式美化欄目 HTML 简体版

原文原文鏈接

1、背景

設計獅童鞋老是會設計各類高大上的效果圖，好比下面這個土豪金的效果。javascript

該圖中「已閱讀並贊成相關服務條款」前面的複選框有一個金色的邊框，打鉤時是一個金色的對勾。接下來講說怎樣實現該效果。css

2、解決方法

一、純css解決方法

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

單選按鈕和複選按鈕都有選中和未選中狀態。要設置這兩個按鈕默認樣式稍微複雜點。該文經過:checked選擇器配合其餘表情實現自定義樣式。前端

舉例：使用:checked選擇器模擬實現複選框樣式。java

<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">我是選中狀態</label>
  </div>
  
  <div class="wrapper">
    <div class="box">
      <input type="checkbox"  id="userpwd" /><span>√</span>
    </div>
    <label for="userpwd">我是未選中狀態</label>
  </div>
</form>

View Code

模擬實現一個選中和未選中的樣式。jquery

沒有樣式時的效果圖以下，css3

最終添加樣式後效果以下。web

實際開發中，我嘗試使用這種方法。app

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

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

二、配合js解決方法

用到圖片：

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

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

經過js點擊事件，label被點擊時在選中與未選中狀態切換。

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

效果：

三、配合js簡化版[update20161223]

2的方案用2次絕對定位有點麻煩，由於用了<input type="checkbox">的複選框，若是要求沒那麼複雜，簡單用的<i>標籤模擬一下複選框也同樣能夠實現效果。

效果：圖片：

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");
    }
});