首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onMay 17, 2016

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

基本 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 的话：
使用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. <body>  
  2.  <h3>专长(多选)</h3>  
  3.  <div class="abgne-menu-20140101-2">  
  4.      <input type="checkbox" id="jquery" name="skill" checked>  
  5.      <label for="jquery">jQuery</label>  
  6.     
  7.      <input type="checkbox" id="css3" name="skill">  
  8.      <label for="css3">CSS3</label>  
  9.     
  10.      <input type="checkbox" id="html5" name="skill">  
  11.      <label for="html5">HTML5</label>  
  12.     
  13.      <input type="checkbox" id="angularjs" name="skill">  
  14.      <label for="angularjs">AngularJS</label>  
  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. }  

是不是很简单呢~
使用CSS3美化HTML表单的技巧演示

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

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

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

先进行基本的样式设计：

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 时的变化?樱?/p>

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表单的技巧演示

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 #HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 #HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 #HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 #HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 #HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 #HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 #HTML / CSS
阿里云(6) 数据同步(1) 排名(1) 窗口函数(3) redis shake(1) Tomcat(18) 条形图(1) 分析统计(1) 速龙(1) matplotlib(7)
You might like
PHP大转盘中奖概率算法实例
2014/10/21 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
JavaScript函数详解
2015/02/27 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
Python Socket传输文件示例
2017/01/16 Python
python读写json文件的简单实现
2017/04/11 Python
django_orm查询性能优化方法
2018/08/20 Python
django 中的聚合函数，分组函数，F 查询，Q查询
2019/07/25 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
python实现银行账户系统
2021/02/22 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
大学生水文观测实习自我鉴定
2013/09/29 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技