使用CSS3美化HTML表单的技巧演示

CSS 的部份只要将 input[type="radio"] 改成 input["checkbox"] 就可以了

1. .abgne-menu-20140101-2 input[type="checkbox"] {   
2.  display: none;   
3. }   
4. .abgne-menu-20140101-2 input[type="checkbox"] + label {   
5.  display: inline-block;   
6.  background-color: #ccc;   
7.  cursor: pointer;   
8.  padding: 5px 10px;   
9. }   
10. .abgne-menu-20140101-2 input[type="checkbox"]:checked + label {   
11.  background-color: #f3d42e;   
12. }  

是不是很简单呢~

下面则是要教大家如何凭空产生出单/多选框的元素囉。

一样是一个 radio 元素加一个专属的 label 元素：

1.   
2.  

   性别(单选)

     
3.    
4.   
5.   
6.      
7.       我是男生  
8.   
  
9.   
10.   
11.      
12.       我是女生  
13.   
  
14.   
15.   
16.      
17.       我不想说  
18.   
  
19.    
20.   

先进行基本的样式设计：

1. .abgne-menu-20140109-1, .abgne-menu-20140109-1 li {   
2.  list-style: none;   
3.  margin: 5px 0;   
4.  padding: 0;   
5. }   
6. .abgne-menu-20140109-1 label {   
7.  cursor: pointer;   
8.  display: block;   
9.  width: 120px;   
10.  position: relative;   
11.  line-height: 31px;   
12. }   
13. .abgne-menu-20140109-1 input[type="radio"] {   
14.  display: none;   
15. }  

这些部份在用 CSS3 做表单 - 自订单/多选框样式(一)中应该都有学过吧，就只是先把 radio 元素隐藏起来。

接着，笔者要使用 ::after 拟元素(Pseudo-elements)在 lable 元素中产生用来代替单选框样式的元素：

1. .abgne-menu-20140109-1 label::after {   
2.  content: "No";   
3.  display: inline-block;   
4.  width: 25px;   
5.  height: 25px;   
6.  line-height: 25px;   
7.  border-radius: 50%;   
8.  padding: 3px;   
9.  color: #FFF;   
10.  background: #f00;   
11.  text-align: center;   
12.  margin-left: 10px;   
13. }  

拟元素的内容是透过 content 属性来指定的，且一样能用 CSS 来装置它。

仔细看一下 DevTools 的画面：

虽然是叫 after，但其实是将元素产生并放置在 label 元素中，所以点击到该元素也等同点击到 label 元素。最后快来补上当 radio:checked 时的变化囉：

1. .abgne-menu-20140109-1 input[type="radio"]:checked + label::after {   
2.  content: "Yes";   
3.  background: green;   
4. }  

如果想要改放在前方时，就改换成使用 ::before：

1. .abgne-menu-20140109-1 label {   
2.  cursor: pointer;   
3.  display: block;   
4.  width: 120px;   
5.  position: relative;   
6.  line-height: 31px;   
7.  padding-left: 40px;   
8. }   
9. .abgne-menu-20140109-1 label::before {   
10.  content: "No";   
11.  display: inline-block;   
12.  width: 25px;   
13.  height: 25px;   
14.  line-height: 25px;   
15.  border-radius: 50%;   
16.  padding: 3px;   
17.  color: #FFF;   
18.  background: #f00;   
19.  text-align: center;   
20.  position: absolute;   
21.  left: 0;   
22. }   
23. .abgne-menu-20140109-1 input[type="radio"]:checked + label::before {   
24.  content: "Yes";   
25.  background: green;   
26. }  

其中 lable 元素的 padding-left 是为了跟拟元素产生距离以免靠的太近太挤~

多选框的做法也是一样，只是将 radio 改成 checkbox 就可以了：

1. .abgne-menu-20140109-2, .abgne-menu-20140109-2 li {   
2.  list-style: none;   
3.  margin: 5px 0;   
4.  padding: 0;   
5. }   
6. .abgne-menu-20140109-2 label {   
7.  cursor: pointer;   
8.  display: block;   
9.  width: 120px;   
10.  position: relative;   
11.  line-height: 31px;   
12. }   
13. .abgne-menu-20140109-2 label::after {   
14.  content: "No";   
15.  display: inline-block;   
16.  width: 25px;   
17.  height: 25px;   
18.  line-height: 25px;   
19.  border-radius: 50%;   
20.  padding: 3px;   
21.  color: #FFF;   
22.  background: #f00;   
23.  text-align: center;   
24.  position: absolute;   
25.  rightright: 0;   
26. }   
27. .abgne-menu-20140109-2 input[type="checkbox"] {   
28.  display: none;   
29. }   
30. .abgne-menu-20140109-2 input[type="checkbox"]:checked + label::after {   
31.  content: "Yes";   
32.  background: green;   
33. }  

有没有觉得 CSS3 真的是很强大咧~