使用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.  displaynone;   
  3. }  

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

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140101-1 input[type="radio"] + label {   
  2.  displayinline-block;   
  3.  background-color#ccc;   
  4.  cursorpointer;   
  5.  padding5px 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.  displaynone;   
  3. }   
  4. .abgne-menu-20140101-2 input[type="checkbox"] + label {   
  5.  displayinline-block;   
  6.  background-color#ccc;   
  7.  cursorpointer;   
  8.  padding5px 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-stylenone;   
  3.  margin5px 0;   
  4.  padding: 0;   
  5. }   
  6. .abgne-menu-20140109-1 label {   
  7.  cursorpointer;   
  8.  displayblock;   
  9.  width120px;   
  10.  positionrelative;   
  11.  line-height31px;   
  12. }   
  13. .abgne-menu-20140109-1 input[type="radio"] {   
  14.  displaynone;   
  15. }  

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

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

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140109-1 label::after {   
  2.  content"No";   
  3.  displayinline-block;   
  4.  width25px;   
  5.  height25px;   
  6.  line-height25px;   
  7.  border-radius: 50%;   
  8.  padding3px;   
  9.  color#FFF;   
  10.  background#f00;   
  11.  text-aligncenter;   
  12.  margin-left10px/* 跟文字产生距离 */  
  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.  backgroundgreen;   
  4. }  

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

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

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140109-1 label {   
  2.  cursorpointer;   
  3.  displayblock;   
  4.  width120px;   
  5.  positionrelative;   
  6.  line-height31px;   
  7.  padding-left40px/* 加上距离 */  
  8. }   
  9. .abgne-menu-20140109-1 label::before {   
  10.  content"No";   
  11.  displayinline-block;   
  12.  width25px;   
  13.  height25px;   
  14.  line-height25px;   
  15.  border-radius: 50%;   
  16.  padding3px;   
  17.  color#FFF;   
  18.  background#f00;   
  19.  text-aligncenter;   
  20.  positionabsolute;   
  21.  left: 0;   
  22. }   
  23. .abgne-menu-20140109-1 input[type="radio"]:checked + label::before {   
  24.  content"Yes";   
  25.  backgroundgreen;   
  26. }  

其中 lable 元素的 padding-left 是为了跟拟元素产生距离以免靠的太近太挤~
使用CSS3美化HTML表单的技巧演示

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

CSS Code复制内容到剪贴板
  1. .abgne-menu-20140109-2, .abgne-menu-20140109-2 li {   
  2.  list-stylenone;   
  3.  margin5px 0;   
  4.  padding: 0;   
  5. }   
  6. .abgne-menu-20140109-2 label {   
  7.  cursorpointer;   
  8.  displayblock;   
  9.  width120px;   
  10.  positionrelative;   
  11.  line-height31px;   
  12. }   
  13. .abgne-menu-20140109-2 label::after {   
  14.  content"No";   
  15.  displayinline-block;   
  16.  width25px;   
  17.  height25px;   
  18.  line-height25px;   
  19.  border-radius: 50%;   
  20.  padding3px;   
  21.  color#FFF;   
  22.  background#f00;   
  23.  text-aligncenter;   
  24.  positionabsolute;   
  25.  rightright: 0;   
  26. }   
  27. .abgne-menu-20140109-2 input[type="checkbox"] {   
  28.  displaynone;   
  29. }   
  30. .abgne-menu-20140109-2 input[type="checkbox"]:checked + label::after {   
  31.  content"Yes";   
  32.  backgroundgreen;   
  33. }  

有没有觉得 CSS3 真的是很强大咧~
使用CSS3美化HTML表单的技巧演示

HTML / CSS 相关文章推荐
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 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
You might like
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
js查错流程归纳
2012/05/04 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
浅谈python中get pass用法
2019/03/19 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
2013年军训通讯稿
2014/02/05 职场文书
自我检讨书怎么写
2015/05/07 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
Python字符串的转义字符
2022/04/07 Python