Web前端自定义input按钮样式

在html中一般我们定义一个< input type=“raddio” > 是自带样式的


但是我们有些时候会需要更改他的样式

一般我们会采用使用一个伪元素选择器，在::before,在label前插入一个新的元素

::before,相当于label下的第一个子元素
在选择器里一定要写content:"",否则浏览器不会展示该元素，而定义display，主要是设置该元素的盒子类型，设置成block则为块盒，可以为元素设置宽高，但是会换行，设置成inline-block则定义为行快盒，不仅可以为元素设置宽高，还不会换行。

以下为浏览器中显示样式

然后需要让label和input相关联，定义label的for属性，和input的id,让两个属性值同名

这样你会发现点击文字，input按钮也会被选中

接下来我们就需要定义label::before的点击样式了

:checked表示input被选中, 这段代码表示intput被选中后label:before的样式
接下来看见的效果

为了更加像按钮，我们需要定义label:before的内边距，和背景颜色显示区域

background-clip：content表示背景剪切为内容的区域，其余区域不显示，（我们的背景默认渲染区域为border、padding、content），box-sizing:border-box表示定义盒子为边框盒子，这样无论里面内容如何变化，盒子就是我们定义的大小（盒子默认为content-box内容盒，设置padding后会将盒子撑大）

这是定义后的样式
接下来我们需要将input隐藏

display:none 表示不显示该盒子，并且不占用位置

这是隐藏后的样式，如果你需要对齐，则只需要定义label
display:flex弹性盒子 align-items：center垂直方向居中

最后再给laybel::before一个右边距 margin-right
你会发现，页面的效果和按钮效果一样

以下是所有代码：


此方法也可用于给复选框等定义样式