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

admin CSS 2022-02-06 16:15:26 CSS3 表单"

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

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

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

<body>
<h3>性别(单选)h3>
<div class="abgne-menu-20140101-1">
<input type="radio" id="male" name="sex">
<label for="male">男性label>
<input type="radio" id="female" name="sex">
<label for="female">女性label>
<input type="radio" id="other" name="sex">
<label for="other">其它label>
div>
body>

每一个标签元素中特过 for 属性来跟单选框元素一一配对，当点击到标签元素时，则同时会触发点击到相对应的单选框。而我们不想要丑丑的单选框元素，所以笔者先用 CSS 将它隐藏起来。

CSS Code复制内容到剪贴板

.abgne-menu-20140101-1 input[type="radio"] {
display: none;
}

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

CSS Code复制内容到剪贴板

.abgne-menu-20140101-1 input[type="radio"] + label {
display: inline-block;
background-color: #ccc;
cursor: pointer;
padding: 5px 10px;
}

笔者只是做一些很简单的样式设计，同时加上自订鼠标游标为 pointer，让使用者知道它是可以点击的。

而比较特别的是 + 这个符号，它是相邻兄弟选择器(Adjacent Sibling Selector)。范例中要找的标签元素是得要跟在单选框元素后的才行，若是改成 #male + label 的话：
2016517113508660.png (190×85)

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

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

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

CSS Code复制内容到剪贴板

.abgne-menu-20140101-1 input[type="radio"]:checked + label {
background-color: #f00;
color: #fff;
}

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

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

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

<body>
<h3>专长(多选)h3>
<div class="abgne-menu-20140101-2">
<input type="checkbox" id="jquery" name="skill" checked>
<label for="jquery">jQuerylabel>
<input type="checkbox" id="css3" name="skill">
<label for="css3">CSS3label>
<input type="checkbox" id="html5" name="skill">
<label for="html5">HTML5label>
<input type="checkbox" id="angularjs" name="skill">
<label for="angularjs">AngularJSlabel>
div>
body>

CSS 的部份只要将 input[type="radio"] 改成 input["checkbox"] 就可以了

CSS Code复制内容到剪贴板

.abgne-menu-20140101-2 input[type="checkbox"] {
display: none;
}
.abgne-menu-20140101-2 input[type="checkbox"] + label {
display: inline-block;
background-color: #ccc;
cursor: pointer;
padding: 5px 10px;
}
.abgne-menu-20140101-2 input[type="checkbox"]:checked + label {
background-color: #f3d42e;
}

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

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

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

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

<body>
<h3>性别(单选)h3>
<ul class="abgne-menu-20140109-1">
<li>
<input type="radio" id="male" name="sex">
<label for="male">我是男生label>
li>
<li>
<input type="radio" id="female" name="sex">
<label for="female">我是女生label>
li>
<li>
<input type="radio" id="other" name="sex">
<label for="other">我不想说label>
li>
ul>
body>

先进行基本的样式设计：

CSS Code复制内容到剪贴板

.abgne-menu-20140109-1, .abgne-menu-20140109-1 li {
list-style: none;
margin: 5px 0;
padding: 0;
}
.abgne-menu-20140109-1 label {
cursor: pointer;
display: block;
width: 120px;
position: relative;
line-height: 31px;
}
.abgne-menu-20140109-1 input[type="radio"] {
display: none;
}

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

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

CSS Code复制内容到剪贴板

.abgne-menu-20140109-1 label::after {
content: "No";
display: inline-block;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
padding: 3px;
color: #FFF;
background: #f00;
text-align: center;
margin-left: 10px; /* 跟文字产生距离 */
}

拟元素的内容是透过 content 属性来指定的，且一样能用 CSS 来装置它。
2016517113800916.png (150×170)

仔细看一下 DevTools 的画面：
2016517113818546.png (515×170)

虽然是叫 after，但其实是将元素产生并放置在 label 元素中，所以点击到该元素也等同点击到 label 元素。最后快来补上当 radio:checked 时的变化囉：

CSS Code复制内容到剪贴板

.abgne-menu-20140109-1 input[type="radio"]:checked + label::after {
content: "Yes";
background: green;
}

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

CSS Code复制内容到剪贴板

.abgne-menu-20140109-1 label {
cursor: pointer;
display: block;
width: 120px;
position: relative;
line-height: 31px;
padding-left: 40px; /* 加上距离 */
}
.abgne-menu-20140109-1 label::before {
content: "No";
display: inline-block;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
padding: 3px;
color: #FFF;
background: #f00;
text-align: center;
position: absolute;
left: 0;
}
.abgne-menu-20140109-1 input[type="radio"]:checked + label::before {
content: "Yes";
background: green;
}

其中 lable 元素的 padding-left 是为了跟拟元素产生距离以免靠的太近太挤~
2016517113926549.png (150×170)

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

CSS Code复制内容到剪贴板

.abgne-menu-20140109-2, .abgne-menu-20140109-2 li {
list-style: none;
margin: 5px 0;
padding: 0;
}
.abgne-menu-20140109-2 label {
cursor: pointer;
display: block;
width: 120px;
position: relative;
line-height: 31px;
}
.abgne-menu-20140109-2 label::after {
content: "No";
display: inline-block;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
padding: 3px;
color: #FFF;
background: #f00;
text-align: center;
position: absolute;
rightright: 0;
}
.abgne-menu-20140109-2 input[type="checkbox"] {
display: none;
}
.abgne-menu-20140109-2 input[type="checkbox"]:checked + label::after {
content: "Yes";
background: green;
}

有没有觉得 CSS3 真的是很强大咧~
2016517114013442.png (150×200)

版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/CSS/77997.html

上一篇 : css border属性的使用方法和技巧

下一篇 : 深入理解CSS height属性设置元素的高度

留言与评论（共有 0 条评论）

1000元配置

2000元配置

3000元配置

4000元配置

5000元配置

6000元配置

7000元配置

8000元配置

9000元配置

万元配置

i3配置

i5配置

i7配置

APU配置

R5配置

R7配置

游戏攻略

软件教程

Win10教程

Win7教程

Mac教程

Linux教程

U盘教程

Server教程

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

版权声明

热门文章

最近发表

标签列表

| 桂ICP备2023010378号-4

Powered By EmpireCMS

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

版权声明

相关文章

热门文章

最近发表

标签列表

var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?1cc50873f5e983e8073d99a425b87921"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); | 桂ICP备2023010378号-4

Powered By EmpireCMS

| 桂ICP备2023010378号-4