f大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下，修真院官网CSS任务7中涉及的关于RGBA和OPACITY的透明效果有何不同以及DISPLAY:NONE和VISIBILITY：HIDDEN的区别。
小课堂【北京第207期】
分享人：郭婷婷
1.背景介绍
单选按钮 && 下拉列表
以上两种展示数据的方式分别由表单元素中的select标签和input标签实现， 其中input元素使用的是radio类型。
2.知识剖析
一、FORM元素
form元素定义 HTML 表单,HTML 表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本输入、下拉列表、单选按钮、复选框等等。 多数情况下被用到的表单标签是输入标签input。
二、RADIO
先介绍一下input元素，input元素是最重要的表单元素。 input元素在 form元素中使用，用来声明允许用户输入数据的 input 控件。 输入类型是由类型属性（type）定义的，输入类型至少包含23种，大多数经常被用到的输入类型如下： text（文本输入）、password（密码输入）、submit（提交按钮）、button（按钮）、image（图像作为提交按钮） 以及checkbox（复选框）和今天的重点radio（单选按钮）。
三、LABEL
label 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。 "for" 属性可把 label 绑定到另外一个元素。只需把 "for" 属性的值设置为相关元素的 id 属性的值。
四、SELECT
select标签用来创建下拉列表。select标签中的 option 标签定义了列表中的可用选项。
3.常见问题
如何修改RADIO和SELECT的默认样式
4 解决方案
如何修改RADIO和SELECT的默认样式
4.1 修改RADIO默认样式
需要用到的工具如下：
label标签；
:checked 选择器,匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。
兄弟选择器：
1、+ 选择器（相邻兄弟选择器），可选择紧接在另一元素后的元素，且二者有相同父元素。
2、~ 选择器，作用是查找某一个指定元素的后面的所有兄弟结点。
4.2 修改SELECT默认样式
appearance 属性，可以让元素看上去像标准的用户界面元素。
所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
5.编码实战
6.扩展思考
checkbox怎么修改默认样式？
修改样式与radio方式一样，可以将上面讲的修改radio的代码中把type类型改为CheckBox试试。
7.参考文献
参考1：W3school
8 更多讨论
1、如何修改input【type=“file”】的默认样式
先将默认的样子使用opacity隐藏，然后将自己设置的样式使用绝对定位覆盖到默认样式的位置。
2、radio还有其它功能吗？
可以使用radio控制幻灯片的播放，设置：checked和兄弟元素关联需要显示的页面。
3、为什么我设置了input【type=“image”】，而：checked没有反应？
：checked只用于radio和checkbox。
鸣谢
感谢大家观看
BY : 郭婷婷
PPT链接：https://ptteng.github.io/PPT/PPT/css-10-radio-select.html#/
视频链接：http://pan.baidu.com/s/1eSb6u6e
密码：mbi2
--------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
网友评论