今天完成的事情，任务10，内容部分。

今天遇到的问题，内容部分的小圆点。在bootstrap4组件库里面，找到了关于form表单的代码，然后引入单选框之后，框架自己自带小圆点。用类选择器无法修改，昨天看过权重方面的知识，之后就准备用id选择器去试一下。结果发现id选择器也无效。只能请教师兄了。

师兄给我找了关于自定义input type=”radio”样式的资料。

input[type="radio"]{   （覆盖掉之前的radio属性）
    display: none;
}
input[type="radio"]+label:before{  （重新设置圆点的大小）
    height: 15px;
    width: 15px;
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 1rem;
    margin-left: 10px;
    border-radius: 50%;
    border: 2px solid #d7d7d7;
    background: #f8f9fb;
}

input[type="radio"]:checked+label:before{（伪类选择器，触发hover效果）
    border: 5.5px solid #1d7ad9;
}

师兄讲解了一遍关于自定义input radio样式的原理，感觉还是有点一知半解。为什么去用before。而不是hover呢？

遇到的第二个问题，小圆点，只能选中一个，其他无效。。问了师兄才知道，下面有id选择器，id选择器不能重复，且只能出现一次。优点就是id选择器的权重比类要高得多。点击选中小圆点的时候，在一起的小圆点要保持，name名一致。

输入框遇到的问题是，给输入框设置限制，只允许输入四位数字，且只能是数字。

第一个简简单单的设置 type=number，maxlength=4，只允许输入四位。且数字0-9

<input class="form-control-one" type="text" maxlength="4" oninput="this.value=this.value.replace(/[^0-9]/g,'');">

收获，学会了如何引用更改bootstrap的表单样式与，输入框样式。如何修改单选框与复选框。

input单选框圆点，选取之后，里面出现小白点。

明天计划，任务10写完。