今天完成的事情：

完成任务10并提交。粗略浏览一边任务11.

学习需要用到的样式：

关于input：

单选按钮的type就是radio，在name相同的情况下，只会有一个被选择。

Radio 对象代表 HTML 表单中的单选按钮。在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。

<label> 标签

配合input标签的时候，在label标签设定文字，也可以触发input标签。

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

type属性用来规定input元素的类型，

       [注意]如果input元素没有设置type属性，或者设置的值在浏览器中不支持，那么输入类型会变成type="text"

name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过javascript引用表单数据

       [注意]只有设置了name属性的表单元素才能在提交表单时传递它们的值

checked属性规定在页面加载时应该被预先选定的input元素，也可以在页面加载后，通过javascript进行设置

　　[注意]checked属性只能与type="radio"或type="checkbox"的input元素配合使用

checked="checked" 表示默认选中项设置。
在坑乎看到一些师兄的回答贴上的代码，恰好有取消radio原本样式的样式，于是学习了一下

input[type=radio]{

    /*去除浏览器默认样式*/

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

我所搜索到的这个属性，有很大的兼容问题。

所有主流浏览器都不支持 appearance 属性。

Firefox 支持替代的 -moz-appearance 属性。

Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

虽然后面在设置select上还是用了（真香）。

搜索到的常规修改radio写法：

1

思路：隐藏原本的样式，opacity：0，设置透明，

利用<label>标签与对应的<input>关联、

使用position(定位)让用户看到的是<label>标签的样式

点击<label>时会选择到对应的<input>

使用<input>的:checked伪类选择器来改变选中<label>的样式.

（有点像任务7的音频隐藏，覆盖到播放图标上）

2

思路：直接赋予input样式display：none(隐藏），

设置lable的class属性inline-block（为了元素同行）再使用lable标签包裹着input（赋予隐藏）和span（inline-block和表现样式），input样式使用checked关联span样式, after写出点击后效果即可。

明天计划的事情：

向任务11进发。

遇到的问题和收获：

在搜索关于css修改input=radio样式的时候很是头疼，很多搜出来的代码一时看不明白。

看了一些回答，感觉和之前的任务设置音频的任务差不多，难以改变样式的情况下，只能隐藏原本的样式，写一个或者用图片覆盖原位，使用position或者z-index提高层级。

学习radio的过程意外的长，看了不少搜索的答案进行demo尝试，很多是无效的。

下拉框使用的select，去除三角形添加自己想要的图标花时也有点长，对于伪类的理解不够深，在设置background路径的时候，设置错了导致调试很久没有显示出来。在这个过程中，对于伪类的使用比较熟悉了些。

这个任务相对任务8,9而言没有那么复杂，需要用到的新知识也不多。