扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >怎么用CSS3美化HTML表单
  • 689

0
分享到

怎么用CSS3美化HTML表单

2024-04-02 19:04:59 689人浏览 八月长安
摘要

这篇文章主要讲解了“怎么用css3美化html表单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS3美化HTML表单”吧！表单是做网页中很常使用到

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

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

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

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

  1. <body>  

  2.  <h4>性别(单选)</h4>  

  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.  <h4>专长(多选)</h4>  

  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表单

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

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

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

  1. <body>  

  2.  <h4>性别(单选)</h4>  

  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 时的变化囉：

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表单这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

--结束END--

本文标题: 怎么用CSS3美化HTML表单

本文链接: https://lsjlt.com/news/77903.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 怎么用CSS3美化HTML表单
    这篇文章主要讲解了“怎么用CSS3美化HTML表单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS3美化HTML表单”吧！表单是做网页中很常使用到...
    99+
    2024-04-02
  • 怎么使用CSS3美化HTML5表单
    小编给大家分享一下怎么使用CSS3美化HTML5表单，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！目前表单格式如下：#redem...
    99+
    2024-04-02
  • 怎么用CSS3美化单选框和多选框
    这篇文章主要介绍“怎么用CSS3美化单选框和多选框”，在日常操作中，相信很多人在怎么用CSS3美化单选框和多选框问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS3美...
    99+
    2024-04-02
  • html表单标签怎么用
    这篇文章主要介绍html表单标签怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！表单标签：form<form> 表单标签，在html页面创建一个表单，表单标签在浏览器...
    99+
    2024-04-02
  • html表单怎么做
    HTML表单怎么做HTML表单是Web开发中常用的一种交互方式，它可以让用户输入数据并将其提交到服务器端进行处理。在本文中，我们将介绍HTML表单的基本语法和使用方法。HTML表单基本语法HTML表单的基本语法如下：<form act...
    99+
    2023-05-14
  • html中表单标签怎么用
    这篇文章主要介绍html中表单标签怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 4-1 表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的...
    99+
    2024-04-02
  • 怎么用css3制作登录表单功能
    这篇文章主要介绍“怎么用css3制作登录表单功能”，在日常操作中，相信很多人在怎么用css3制作登录表单功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用css3制作登...
    99+
    2024-04-02
  • HTML中的表单标签怎么用
    这篇文章主要介绍了HTML中的表单标签怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。form标签定义提交方式、提交地址、表单字符集以及...
    99+
    2024-04-02
  • python怎么利用PrettyTable美化表格
    这篇文章主要介绍“python怎么利用PrettyTable美化表格”，在日常操作中，相信很多人在python怎么利用PrettyTable美化表格问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”python怎...
    99+
    2023-06-29
  • html中怎么设置表单
    html中设置表单的方法：1.创建html文件；2.添加html架构代码；3.在body标签中使用form标签设置表单；4.可通过浏览器查看设置效果。html中设置表单的方法：首先创建一个html文件。将html架构代码输入在html文件中...
    99+
    2024-04-02
  • HTML 有序列表与 CSS：利用 CSS 美化和增强列表
    CSS 美化和增强列表 CSS（层叠样式表）提供了多种选项来美化和增强 HTML 列表： 1. 样式化列表项 list-style-type 属性：更改列表项标记的外观，例如圆圈、方块或数字。 list-style-position 属...
    99+
    2024-04-02
  • 如何使用CSS3美化单选、复选按钮的显示样式
    这篇文章将为大家详细讲解有关如何使用CSS3美化单选、复选按钮的显示样式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。效果图如下实例代码<!DOCTYPE ...
    99+
    2024-04-02
  • HTML怎么编写一个简单的表单
    这篇文章主要介绍了HTML怎么编写一个简单的表单，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。我们先来看下常用的表单元素有哪些： 文本域 文本域通过 &l...
    99+
    2023-06-27
  • html5+css3怎么实现注册表单功能
    这篇文章主要介绍“html5+css3怎么实现注册表单功能”，在日常操作中，相信很多人在html5+css3怎么实现注册表单功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2024-04-02
  • Web表单美化CSS框架Topcoat有什么特点
    这篇文章主要介绍“Web表单美化CSS框架Topcoat有什么特点”，在日常操作中，相信很多人在Web表单美化CSS框架Topcoat有什么特点问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，...
    99+
    2024-04-02
  • CSS怎么使用图片美化菜单效果
    这篇文章主要讲解了“CSS怎么使用图片美化菜单效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS怎么使用图片美化菜单效果”吧！本文实例讲述了CSS使用...
    99+
    2024-04-02
  • 怎么使用html制作一个简单的提交表单
    这篇文章主要介绍怎么使用html制作一个简单的提交表单，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！html制作一个表单的方法网页中常见的“登录”“注册”等功能通常都是使用表单实现的...
    99+
    2024-04-02
  • 表单格式化插件jquery.serializeJSON怎么用
    小编给大家分享一下表单格式化插件jquery.serializeJSON怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！使用...
    99+
    2024-04-02
  • 如何用div仿checkbox表单样式美化及功能
    本篇内容主要讲解“如何用div仿checkbox表单样式美化及功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何用div仿checkbox表单样式美化及功能...
    99+
    2024-04-02
  • CSS3扁平化价格表代码怎么写
    这篇文章主要介绍了CSS3扁平化价格表代码怎么写的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS3扁平化价格表代码怎么写文章都会有所收获，下面我们一起来看看吧。代码如下：&...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作