CSS學習筆記三：自定義單選框，復選框，開關
阿新 • • 發佈：2017-07-29
sla checked 移動 transform 第一個 16px 位移 block back 
打開有驚喜
打開有驚喜
一點一點學習CCS，這次學習了如何自定義單選框，復選框以及開關。
一、單選框
1、先寫好body裏面的樣式，先寫幾個框
1 <body> 2 <div class="radio-1"> 3 <input type="radio" name="radio-1" id="radio-1-1"> 4 <label for="radio-1-1"></label> 5 6 <input type="radio" name="radio-1" id="radio-1-2"> 7 <label for="radio-1-2"></label> 8 9 <input type="radio" name="radio-1" id="radio-1-3"> 10 <label for="radio-1-3"></label> 11 12 </div> 13 </body>
用input寫好radio在旁邊顯示，這個label中的for 屬性的值與控件 id 是一樣的效果。這裏在下面將label的樣式如同按鈕的樣式編寫
1 <style type="text/css"> 2 .radio-1{ 3 width: 980px; 4 margin: 0 auto; 5 padding: 3% 0; 6 text-align: center; 7 font-size: 28px; 8 } 9 10 .radio-1 [type="radio"]{ 11 display: none; 12 13 }14 .radio-1 label{ 15 display: inline-block; 16 position: relative; 17 width: 60px; 18 height: 60px; 19 border:1px solid #ccc; 20 background-color: #fff; 21 margin-right: 10px; 22 cursor: pointer; 23 border-radius: 100% 24 } 25 .radio-1 label:after{ 26 content: ‘‘; 27 position: absolute;; 28 top: 10px; 29 left: 10px; 30 width: 40px; 31 height: 40px; 32 background-color: #81C2D6; 33 border-radius: 50%; 34 transform: scale(0); 35 /*transition: transfrom .2s ease-out;*/ 36 } 37 .radio-1 [type="radio"]:checked + label{ 38 background-color: #eee; 39 /*transition: background-color .2s ease-in;*/ 40 } 41 .radio-1 [type="radio"]:checked + label:after{ 42 transform: scale(1); 43 /*transition: transfrom .2s ease-in;*/ 44 } 45 </style>
.radio-1 [type="radio"]{
display: none;} 這個樣式是把由該選擇器中包含的radio都不讓其顯示，差不多就是隱藏的意思；
打開有驚喜
二、復選框
1 .checkbox-1{ 2 width: 980px; 3 margin:0 auto; 4 text-align:center; 5 padding: 3% 0; 6 background-color:#9cc; 7 } 8 .checkbox-1 [type="checkbox"]{ 9 display: none; 10 11 } 12 .checkbox-1 label{ 13 display: inline-block; 14 width: 10px; 15 height: 10px; 16 padding: 9px; 17 border:1px #ccc solid; 18 background-color: #fff; 19 color: #333; 20 margin-right: 10px; 21 overflow: hidden ; 22 position: relative; 23 cursor: pointer; 24 } 25 .checkbox-1 label:after{ 26 content: ‘A‘; 27 font-family: Arial; 28 color: #fff; 29 background-color: #999; 30 width: 26px; 31 height: 26px; 32 line-height: 26px; 33 position: absolute;; 34 left: 1px; 35 top: 1px; 36 border-radius: 4px; 37 text-align: center; 38 transform: translateY(-30px); 39 transition: transform .2s ease-out; 40 41 } 42 .checkbox-1 [type="checkbox"]:checked +label:after{ 43 transform: translateY(0); 44 transition: transform .2s ease-in; 45 }
第一個基本樣式是設置整體背景，第二樣式是將input隱藏掉，只顯示出寫的label。因為for 屬性相當與id屬性所以label 所對應的也是input的輸入值，在label樣式，設置其display為內嵌式，同時設置其長寬，背景顏色以及長寬，當你點擊按鈕的時候的checked則將after的內容改變位置，本身在label中就設置了超過label設置的長寬的東西都會被隱藏，而一開始after中的東西拜訪的位置就往上移動一定距離，當點擊後，則修改樣式中的translate，即改變其位移，回到原來的位置。
1 <div class="checkbox-1"> 2 <input type="checkbox" checked="checked" name="checkbox-1" id="checkbox-1-1"> 3 <label for="checkbox-1-1"></label> 4 5 <input type="checkbox" name="checkbox-1" id="checkbox-1-2"> 6 <label for="checkbox-1-2"></label> 7 8 <input type="checkbox" name="checkbox-1" id="checkbox-1-3"> 9 <label for="checkbox-1-3"></label> 10 11 </div>
三、開關
1 .checkbox-2 [type="checkbox"]{ 2 display: none; 3 } 4 .checkbox-2{ 5 width: 980px; 6 margin:0 auto; 7 text-align:center; 8 padding: 3% 0; 9 background-color:#fc9; 10 } 11 .checkbox-2 label{ 12 display: inline-block; 13 width: 68px; 14 height:34px; 15 border:1px solid #eee; 16 border-radius: 18px; 17 background-color: #fafafa; 18 margin-right: 10px; 19 cursor: pointer; 20 position: relative; 21 transition: background-color .1s ease-in; 22 } 23 .checkbox-2 label:after{ 24 content: ‘‘; 25 position: absolute; 26 left: 1px; 27 top:1px; 28 width: 30px; 29 height: 30px; 30 border:1px solid #eee; 31 border-radius: 50%; 32 background-color: #fff; 33 transition: left .1s ease-out; 34 } 35 .checkbox-2 [type="checkbox"]:checked +label{ 36 background-color: #3c6; 37 transition: background-color .1s ease-in; 38 39 } 40 .checkbox-2 [type="checkbox"]:checked +label:after{ 41 left: 35px; 42 transition: left .1s ease-out; 43 44 }
在label 中先把背景設置好，基礎的背景，一個橢圓，在after中設置一個小圓圈，設置好背景顏色，在點擊該開關後，將該小圓圈向左移動，同時將該背景顏色更改為綠色。
1 <div class="checkbox-2"> 2 <input type="checkbox" checked="checked" name="checkbox-1" id="checkbox-2-1"> 3 <label for="checkbox-2-1"></label> 4 5 <input type="checkbox" name="checkbox-1" id="checkbox-2-2"> 6 <label for="checkbox-2-2"></label> 7 8 <input type="checkbox" name="checkbox-2" id="checkbox-2-3"> 9 <label for="checkbox-2-3"></label> 10 11 </div>
打開有驚喜
CSS學習筆記三：自定義單選框，復選框，開關