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

网络
生活中只有两种选择：重新开始，成为自己生活的主角；或留在原处并成为他人的支持角色。生活中，很多时候都需要我们要耐心，耐心做人，耐心做事，更要耐心生活。

表单是做网页中很常使用到的元素，但预设的样式都是丑丑的，笔者今天要教各位快速做出自订的单/多选框样式，让您的表单硬是要跟别人不一样。

基本 HTML 就是一个单选框元素加上标签元素：

XML/HTML Code复制内容到剪贴板
  1. <body>
  2. <h3>性别(单选)</h3>
  3. <divclass="abgne-menu-20140101-1">
  4. <inputtype="radio"id="male"name="sex">
  5. <labelfor="male">男性</label>
  7. <inputtype="radio"id="female"name="sex">
  8. <labelfor="female">女性</label>
  10. <inputtype="radio"id="other"name="sex">
  11. <labelfor="other">其它</label>
  12. </div>
  13. </body>

每一个标签元素中特过 for 属性来跟单选框元素一一配对，当点击到标签元素时，则同时会触发点击到相对应的单选框。而我们不想要丑丑的单选框元素，所以笔者先用 CSS 将它隐藏起来。

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140101-1input[type="radio"]{
  2. display:none;
  3. }

隐藏好之后，接下来就是将标签元素进行改造一下：

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140101-1input[type="radio"]+label{
  2. display:inline-block;
  3. background-color:#ccc;
  4. cursor:pointer;
  5. padding:5px10px;
  6. }

笔者只是做一些很简单的样式设计，同时加上自订鼠标游标为 pointer，让使用者知道它是可以点击的。

而比较特别的是 + 这个符号，它是相邻兄弟选择器(Adjacent Sibling Selector)。范例中要找的标签元素是得要跟在单选框元素后的才行，若是改成 #male + label 的话：

就真的只有在 #male 后的下一个标签元素才会有效果，其它更后面的兄弟元素则是不会有反应的唷。

好啦~现在若没问题的话，就会看到基本的样式出来了：

最后只要再搭配 :checked 拟类别(Pseudo-classes)就能收工下班啦！

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140101-1input[type="radio"]:checked+label{
  2. background-color:#f00;
  3. color:#fff;
  4. }

这边是针对被点选到的单选框元素后的下一个标签元素进行设定。整个完成后的样式就变成了：

而多选框的自订方式也可以依此类推来设定。

XML/HTML Code复制内容到剪贴板
  1. <body>
  2. <h3>专长(多选)</h3>
  3. <divclass="abgne-menu-20140101-2">
  4. <inputtype="checkbox"id="jquery"name="skill"checked>
  5. <labelfor="jquery">jQuery</label>
  7. <inputtype="checkbox"id="css3"name="skill">
  8. <labelfor="css3">CSS3</label>
  10. <inputtype="checkbox"id="html5"name="skill">
  11. <labelfor="html5">HTML5</label>
  13. <inputtype="checkbox"id="angularjs"name="skill">
  14. <labelfor="angularjs">AngularJS</label>
  15. </div>
  16. </body>

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

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140101-2input[type="checkbox"]{
  2. display:none;
  3. }
  4. .abgne-menu-20140101-2input[type="checkbox"]+label{
  5. display:inline-block;
  6. background-color:#ccc;
  7. cursor:pointer;
  8. padding:5px10px;
  9. }
  10. .abgne-menu-20140101-2input[type="checkbox"]:checked+label{
  11. background-color:#f3d42e;
  12. }

是不是很简单呢~

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

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

XML/HTML Code复制内容到剪贴板
  1. <body>
  2. <h3>性别(单选)</h3>
  3. <ulclass="abgne-menu-20140109-1">
  4. <li>
  5. <inputtype="radio"id="male"name="sex">
  6. <labelfor="male">我是男生</label>
  7. </li>
  8. <li>
  9. <inputtype="radio"id="female"name="sex">
  10. <labelfor="female">我是女生</label>
  11. </li>
  12. <li>
  13. <inputtype="radio"id="other"name="sex">
  14. <labelfor="other">我不想说</label>
  15. </li>
  16. </ul>
  17. </body>

先进行基本的样式设计：

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

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

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

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140109-1label::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 时的变化囉：

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140109-1input[type="radio"]:checked+label::after{
  2. content:"Yes";
  3. background:green;
  4. }

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

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140109-1label{
  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-1label::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-1input[type="radio"]:checked+label::before{
  24. content:"Yes";
  25. background:green;
  26. }

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

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

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140109-2,.abgne-menu-20140109-2li{
  2. list-style:none;
  3. margin:5px0;
  4. padding:0;
  5. }
  6. .abgne-menu-20140109-2label{
  7. cursor:pointer;
  8. display:block;
  9. width:120px;
  10. position:relative;
  11. line-height:31px;
  12. }
  13. .abgne-menu-20140109-2label::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-2input[type="checkbox"]{
  28. display:none;
  29. }
  30. .abgne-menu-20140109-2input[type="checkbox"]:checked+label::after{
  31. content:"Yes";
  32. background:green;
  33. }

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

本文如何使用CSS3美化HTML表单的技巧演示到此结束。放弃是一种智慧、分享是一种美德。小编再次感谢大家对我们的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例