表单是做网页中很常使用到的元素,但预设的样式都是丑丑的,笔者今天要教各位快速做出自订的单/多选框样式,让您的表单硬是要跟别人不一样。
基本 HTML 就是一个单选框元素加上标签元素:
每一个标签元素中特过 for 属性来跟单选框元素一一配对,当点击到标签元素时,则同时会触发点击到相对应的单选框。而我们不想要丑丑的单选框元素,所以笔者先用 CSS 将它隐藏起来。
隐藏好之后,接下来就是将标签元素进行改造一下:
笔者只是做一些很简单的样式设计,同时加上自订鼠标游标为 pointer,让使用者知道它是可以点击的。
而比较特别的是 + 这个符号,它是相邻兄弟选择器(Adjacent Sibling Selector)。范例中要找的标签元素是得要跟在单选框元素后的才行,若是改成 #male + label 的话:
就真的只有在 #male 后的下一个标签元素才会有效果,其它更后面的兄弟元素则是不会有反应的唷。
好啦~现在若没问题的话,就会看到基本的样式出来了:
最后只要再搭配 :checked 拟类别(Pseudo-classes)就能收工下班啦!
这边是针对被点选到的单选框元素后的下一个标签元素进行设定。整个完成后的样式就变成了:
而多选框的自订方式也可以依此类推来设定。
CSS 的部份只要将 input[type="radio"] 改成 input["checkbox"] 就可以了
是不是很简单呢~
下面则是要教大家如何凭空产生出单/多选框的元素囉。
一样是一个 radio 元素加一个专属的 label 元素:
先进行基本的样式设计:
这些部份在用 CSS3 做表单 - 自订单/多选框样式(一)中应该都有学过吧,就只是先把 radio 元素隐藏起来。
接着,笔者要使用 ::after 拟元素(Pseudo-elements)在 lable 元素中产生用来代替单选框样式的元素:
拟元素的内容是透过 content 属性来指定的,且一样能用 CSS 来装置它。
仔细看一下 DevTools 的画面:
虽然是叫 after,但其实是将元素产生并放置在 label 元素中,所以点击到该元素也等同点击到 label 元素。最后快来补上当 radio:checked 时的变化囉:
如果想要改放在前方时,就改换成使用 ::before:
其中 lable 元素的 padding-left 是为了跟拟元素产生距离以免靠的太近太挤~
多选框的做法也是一样,只是将 radio 改成 checkbox 就可以了:
有没有觉得 CSS3 真的是很强大咧~
2019年1月9日,中国互联网协会在北京成立中文 域名 推进工作组。中文域名推进工...
一、温馨而柔和 相关地址:http://www.web-designers.cn/post.aspx?id=2481 高亮...
下面通过实例代码给大家介绍HTML5中使用json对象的方法,具体代码如下所示: !DO...
为了吸引更多有云需求、高度看重隐私安全的客户,甲骨文计划将其公有云直接装入...
作者: Ahmad Shadeed 译者:前端小智 来源:ishadeed 有梦想,有干货,微信搜索...
圣杯布局源自 Matthew Levine 在06年的一篇 文章 ,其DOM结构如下: XML/HTML Co...
TOP云 (west.cn)6月23日消息,近日美国品牌营销公司Mod Girl Marketing在其博...
CSS3 Patterns Gallery 这个CSS3模式库展示了各种使用纯 CSS3 实现的网页背景效...
给select元素增加:padding-left:20px;但是未生效,如下图所示: 在select上如...
在浏览网页的时候我们随处可见设置为主页的链接或者按钮,本质上他们都是一个脚...