您现在的位置是：网站首页> 编程资料编程资料

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

2021-09-05 1067人已围观

简介 这篇文章主要介绍了使用CSS3美化HTML表单的技巧演示,包括单选框元素的隐藏以及选项之间的间隔等调整方法,需要的朋友可以参考下

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

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

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

每一个标签元素中特过 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 的话：
2016517113508660.png (190×85)

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

好啦~现在若没问题的话，就会看到基本的样式出来了：
2016517113524269.png (190×85)

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

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

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

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

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.  <h3>专长(多选)h3>  
  3.  <div class="abgne-menu-20140101-2">  
  4.      <input type="checkbox" id="jquery" name="skill" checked>  
  5.      <label for="jquery">jQuerylabel>  
  6.     
  7.      <input type="checkbox" id="css3" name="skill">  
  8.      <label for="css3">CSS3label>  
  9.     
  10.      <input type="checkbox" id="html5" name="skill">  
  11.      <label for="html5">HTML5label>  
  12.     
  13.      <input type="checkbox" id="angularjs" name="skill">  
  14.      <label for="angularjs">AngularJSlabel>  
  15.  div>  
  16. body>  

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

是不是很简单呢~
2016517113711857.png (300×85)

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

上一篇：利用CSS3的border-radius绘制太极及爱心图案示例

下一篇：CSS3让登陆面板3D旋转起来CSS3 3D旋转rotate效果实例介绍 CSS3近阶段篇之酷炫的3D旋转透视 CSS3实现的一款迷人3D木块旋转动画CSS3实现酷炫的3D旋转透视效果

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网