使用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 相关文章推荐
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 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
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
图片onload事件触发问题解决方法
2011/07/31 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
NumPy排序的实现
2020/01/21 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
门诊挂号室室长岗位职责
2013/11/27 职场文书
综治宣传月活动总结
2014/04/28 职场文书
汽车广告策划方案
2014/05/31 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
结婚堵门保证书
2015/05/08 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS