怎么用CSS3美化HTML表单

这篇文章主要讲解了“怎么用CSS3美化HTML表单”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用CSS3美化HTML表单”吧!

创新互联专注于苍溪企业网站建设,自适应网站建设,商城开发。苍溪网站建设公司,为苍溪等地区提供建站服务。全流程按需网站策划,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

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

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

XML/HTML Code复制内容到剪贴板

  1.   

  2.  

    性别(单选)

      

  3.    

  4.        

  5.      男性  

  6.     

  7.        

  8.      女性  

  9.     

  10.        

  11.      其它  

  12.  

  

  •   

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

    CSS Code复制内容到剪贴板

    1. .abgne-menu-20140101-1 input[type="radio"] {   

    2.  display: none;   

    3. }  

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

    CSS Code复制内容到剪贴板

    1. .abgne-menu-20140101-1 input[type="radio"] + label {   

    2.  display: inline-block;   

    3.  background-color: #ccc;   

    4.  cursor: pointer;   

    5.  padding: 5px 10px;   

    6. }  

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

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

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

    好啦~现在若没问题的话,就会看到基本的样式出来了:
    怎么用CSS3美化HTML表单

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

    CSS Code复制内容到剪贴板

    1. .abgne-menu-20140101-1 input[type="radio"]:checked + label {   

    2.  background-color: #f00;   

    3.  color: #fff;   

    4. }  

    这边是针对被点选到的单选框元素后的下一个标签元素进行设定。整个完成后的样式就变成了:
    怎么用CSS3美化HTML表单

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

    XML/HTML Code复制内容到剪贴板

    1.   

    2.  

      专长(多选)

        

    3.    

    4.        

    5.      jQuery  

    6.     

    7.        

    8.      CSS3  

    9.     

    10.        

    11.      HTML5  

    12.     

    13.        

    14.      AngularJS  

    15.  

      

  •   

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

    CSS Code复制内容到剪贴板

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

    是不是很简单呢~
    怎么用CSS3美化HTML表单

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

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

    XML/HTML Code复制内容到剪贴板

    1.   

    2.  

      性别(单选)

        

    3.    

    4.   

    5.   

    6.      

    7.       我是男生  

    8.   

    9.   

    10.   

    11.   

    12.      

    13.       我是女生  

    14.   

    15.   

    16.   

    17.   

    18.      

    19.       我不想说  

    20.   

    21.   

    22.    

    23.   

    先进行基本的样式设计:

    CSS Code复制内容到剪贴板

    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 元素中产生用来代替单选框样式的元素:

    CSS Code复制内容到剪贴板

    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 来装置它。
    怎么用CSS3美化HTML表单

    仔细看一下 DevTools 的画面:
    怎么用CSS3美化HTML表单

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

    CSS Code复制内容到剪贴板

    1. .abgne-menu-20140109-1 input[type="radio"]:checked + label::after {   

    2.  content: "Yes";   

    3.  background: green;   

    4. }  

    怎么用CSS3美化HTML表单

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

    CSS Code复制内容到剪贴板

    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 是为了跟拟元素产生距离以免靠的太近太挤~
    怎么用CSS3美化HTML表单

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

    CSS Code复制内容到剪贴板

    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 真的是很强大咧~
    怎么用CSS3美化HTML表单

    感谢各位的阅读,以上就是“怎么用CSS3美化HTML表单”的内容了,经过本文的学习后,相信大家对怎么用CSS3美化HTML表单这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


    新闻名称:怎么用CSS3美化HTML表单
    网页URL:http://myzitong.com/article/gegdjd.html

    其他资讯