使用css制作radio,checkbox和switch

作者：张铭标

撰写时间：2019年7月 26日

有时候我们使用默认的checkbox,radio和switch的时候,会觉得这个样式不是自己想要的,会感觉很丑.我们有时候需要美化一下radio和checkbox,这个时候有没有一种办法可以做到这一点呢?答案当然是有的,而且我们还可以自己定义这些选框的样式,知道了原理之后就可以实现属于你自己有着自己独特风格的页面.

具体代码:

radio:

radio选择时的样式: (颜色可以自己调节)

.tg-icheck-radio > input:checked + .tg-icheck-media
{

border-color: blue;

background: green;

}

这里需要注意的是:定义radio时,请务必要定义name属性.

checkbox:

<div

class=“tg-icheck-title”>网球

switch:

这是效果图: