发表于: 2018-07-24 22:00:11

1 667


今天完成的事情:开始做任务十剩下的内容

研究了一上午,然后弄出来这个

然后要隐藏它并使用绝对定位使它不占空间,

创建label标签并关联input,

设置label和input为相对定位,使定位before和after更加方便,顺便设置鼠标移动到此内容时鼠标变为手更好看,

然后input关联lebel::befoer,设置样式并绝对定位top 0  left 0  ,设置为行内块元素

设置点击伪元素后背景色更改为蓝色

再设置after,跟before一样只是因为本次after为一个非常小的白色圆,所以少了个平时隐藏的步骤,只用设置点击时转换为块级元素

然后定位至大圆中间即可

然后添加右边的下拉框

   这个下拉框用官网给的攻略重置了样式就好了,然后现在在想怎么让它垂直居中,

最后放弃了这个想法改成其他的样式

再弄下一行,直接复制修改一下就好




明天计划的事情:一定要完成任务10 
遇到的问题:伪元素的使用,还是得实际运用。。 
收获:初步使用伪元素,清除select 默认样式


返回列表 返回列表
评论

    分享到