发表于: 2017-03-31 00:34:12
3 743
今天完成:
继续任务10。使用flex布局+div完成进度条,使用媒查询改变在不同屏幕下的布局。本来想使用栅格布局的,效果不是很好。
查找有关改变radio默认样式和input的相关资料。原来表单还那么多的属性可以研究,现在回过头巩固才发现,之前对input只是一带而过了。
明天计划:
继续任务10的主体表单修改,样式布局,插入select下拉框。
遇到困难:
今天一直耽误在radio默认样式的修改上,找了资料加上看师兄的日报才有了思路。
1、首先要解决点击文字可以选中radio的问题,如下代码还比较简单。
<label for="man">
<input type="radio" value="男" name="man" id="man"/>
文字
</label>
2、修改radio默认样式。
普遍的思路是先把默认样式使用display:none隐藏
display: none;
然后使用span标签添加自定义样式覆盖,先添加未被选中时的样式
.inpot-box{
width: 1.5rem;
height: 1.5rem;
background-color: #fbfbfb;
border: solid 1px #d5d5d5;
border-radius: 50%;
display: inline-block;
}
再使用如下代码添加鼠标单击出现其他样式,实现覆盖默认样式的效果。
.pop1-1:checked + .wrap:before{
收获:重新理解了input表单的作用。学会了如何使用css修改radio的默认样式。
评论