CSS3 combined with fontawesome font to achieve custom radio button check box effect-CSS Tutorial-php.cn

CSS3 combined with fontawesome font to achieve custom radio button check box effect

高洛峰

Release： 2017-02-09 11:34:16

Original

1752 people have browsed it

I often see other people implementing some beautiful check boxes or radio button buttons when working on the front end. Due to current project reasons, many radio buttons and check boxes look very ugly, so I decided to make my own on a whim. Realized it again.

1. First, upload the css code:

Among them, I wrote it in the form of comments;
About I set z-index based on the initial positioning considerations. If anyone wants to use it, think about it yourself;

/*复选框效果*/
input[type=checkbox] {
    width:16px;
    height:16px;
    z-index:10;
}  /* 此处不解释，定义的是复选框宽高*/
input[type=checkbox]::before {
    content:" ";
    display:inline-block;
    color:#000;
    width:16px;
    height:16px;
    background:#fff;
    border:1px #1ab394 solid;
    z-index:9;
    position: absolute;
}/* 此处定义的是在没有选中的情况下的样式，利用::before设置空的content实现 */
input[type=checkbox]:checked::before {
    content:"\f00c";
    color:#1ab394; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
} /* 此处定义复选框选中时候的样式，此处 在before的content里使用\f00c的awesome字体来实现，这个字体值表示打勾*/
/* 单选框效果 */
input[type=radio] {
    width:16px;
    height:16px;
    z-index:10;
}
input[type=radio]::before {
    content:" ";
    display:inline-block;
    color:#000;
    width:16px;
    height:16px;
    border-radius:8px;
    background:#fff;
    border:1px #1ab394 solid;
    z-index:9;
    position: absolute;
}
input[type=radio]:checked::after {
    content:" ";
    display:inline-block;
    width:8px;
    height:8px;
    background:#1ab394;
    border-radius:50%;
    position:absolute;
    z-index:11;
    top:4px;
    left:4px;
} /*以上的单选框和复选框类似，但此处选中不是采用更换字体，目前来说，没发现有适合的字体适用于里面的圆点，所以采用after设置一个长宽为8像素的块并设置圆角调整位置放到外层边框内容里实现*/

Copy after login

2. The final effect:

CSS3 combined with fontawesome font to achieve custom radio button check box effect

The above picture is the actual screenshot of my application.

I often see others implementing some beautiful check boxes or radio button buttons when doing front-end work. Due to current project reasons, there are many radio boxes and check boxes. The frame looked ugly, so I decided to do it myself on a whim.

1. First, upload the css code:

Among them, I wrote it in the form of comments;
About I set z-index based on the initial positioning considerations. If anyone wants to use it, think about it yourself;

/*复选框效果*/
input[type=checkbox] {
    width:16px;
    height:16px;
    z-index:10;
}  /* 此处不解释，定义的是复选框宽高*/
input[type=checkbox]::before {
    content:" ";
    display:inline-block;
    color:#000;
    width:16px;
    height:16px;
    background:#fff;
    border:1px #1ab394 solid;
    z-index:9;
    position: absolute;
}/* 此处定义的是在没有选中的情况下的样式，利用::before设置空的content实现 */
input[type=checkbox]:checked::before {
    content:"\f00c";
    color:#1ab394; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
} /* 此处定义复选框选中时候的样式，此处 在before的content里使用\f00c的awesome字体来实现，这个字体值表示打勾*/
/* 单选框效果 */
input[type=radio] {
    width:16px;
    height:16px;
    z-index:10;
}
input[type=radio]::before {
    content:" ";
    display:inline-block;
    color:#000;
    width:16px;
    height:16px;
    border-radius:8px;
    background:#fff;
    border:1px #1ab394 solid;
    z-index:9;
    position: absolute;
}
input[type=radio]:checked::after {
    content:" ";
    display:inline-block;
    width:8px;
    height:8px;
    background:#1ab394;
    border-radius:50%;
    position:absolute;
    z-index:11;
    top:4px;
    left:4px;
} /*以上的单选框和复选框类似，但此处选中不是采用更换字体，目前来说，没发现有适合的字体适用于里面的圆点，所以采用after设置一个长宽为8像素的块并设置圆角调整位置放到外层边框内容里实现*/

Copy after login

2. The final effect:

CSS3 combined with fontawesome font to achieve custom radio button check box effect

The above picture is the actual screenshot of my application.

For more related articles using CSS3 combined with fontawesome fonts to implement custom radio button checkbox effects, please pay attention to the PHP Chinese website!