本文主要包含CSS3,表单等相关知识,佚名 希望在学习及工作中可以帮助到您
表单是做网页中很常使用到的元素，但预设的样式都是丑丑的，笔者今天要教各位快速做出自订的单/多选框样式，让您的表单硬是要跟别人不一样。
基本 HTML 就是一个单选框元素加上标签元素：
- <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 将它隐藏起来。
- .abgne-menu-20140101-1 input[type="radio"] {
- display: none;
- }
隐藏好之后，接下来就是将标签元素进行改造一下：
- .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 的话：
就真的只有在 #male 后的下一个标签元素才会有效果，其它更后面的兄弟元素则是不会有反应的唷。
好啦~现在若没问题的话，就会看到基本的样式出来了：
最后只要再搭配 :checked 拟类别(Pseudo-classes)就能收工下班啦！
- .abgne-menu-20140101-1 input[type="radio"]:checked + label {
- background-color: #f00;