表单是做网页中很常使用到的元素,但预设的样式都是丑丑的,笔者今天要教各位快速做出自订的单/多选框样式,让您的表单硬是要跟别人不一样。
基本 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 的话:
就真的只有在 #male 后的下一个标签元素才会有效果,其它更后面的兄弟元素则是不会有反应的唷。
最后只要再搭配 :checked 拟类别(Pseudo-classes)就能收工下班啦!
CSS Code复制内容到剪贴板- .abgne-menu-20140101-1 input[type="radio"]:checked + label {
- background-color: #f00;
- color: #fff;
- }
这边是针对被点选到的单选框元素后的下一个标签元素进行设定。整个完成后的样式就变成了:
而多选框的自订方式也可以依此类推来设定。
XML/HTML Code复制内容到剪贴板- <body>
- <h3>专长(多选)</h3>
- <div class="abgne-menu-20140101-2">
- <input type="checkbox" id="jquery" name="skill" checked>
- <label for="jquery">jQuery</label>
- <input type="checkbox" id="css3" name="skill">
- <label for="css3">CSS3</label>
- <input type="checkbox" id="html5" name="skill">
- <label for="html5">HTML5</label>
- <input type="checkbox" id="angularjs" name="skill">
- <label for="angularjs">AngularJS</label>
- </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;
- }
下面则是要教大家如何凭空产生出单/多选框的元素囉。
一样是一个 radio 元素加一个专属的 label 元素:
- <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 来装置它。
虽然是叫 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 是为了跟拟元素产生距离以免靠的太近太挤~
多选框的做法也是一样,只是将 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;
- }
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。