사용자 정의 라디오 버튼 체크박스 효과를 얻기 위해 CSS3와 Fontawesome 글꼴을 결합했습니다.

프런트엔드 작업을 할 때 다른 사람들이 아름다운 체크박스나 라디오 버튼 버튼을 구현하는 것을 종종 볼 수 있습니다. 현재 프로젝트 문제로 인해 많은 라디오 박스와 체크박스가 보기 흉해 보이기 때문에 임의로 직접 만들어 보기로 했습니다. .다시 깨달았습니다.

1. 먼저 CSS 코드를 추가합니다.

1. 그 중

2. 초기 위치 지정 고려 사항을 기반으로 Z-index를 설정하는 방법에 대해 여기서 사용하려는 경우

/*复选框效果*/
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像素的块并设置圆角调整位置放到外层边框内容里实现*/

2. 최종 효과:

위 사진은 실제 제가 사용하는 어플의 스크린샷입니다.

프론트엔드 작업을 하다보면 체크박스나 라디오버튼 버튼을 예쁘게 구현하는 분들을 종종 보게 되는데, 현재 프로젝트상의 이유로 라디오박스나 체크박스가 많이 있습니다. 프레임이 보기 흉해 보여서 임의로 직접 해보기로 했습니다.

1. 먼저 CSS 코드를 추가합니다.

1. 그 중

2. 초기 위치 지정 고려 사항을 기반으로 Z-index를 설정하는 방법에 대해 여기서 사용하려는 경우

/*复选框效果*/
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像素的块并设置圆角调整位置放到外层边框内容里实现*/

2. 최종 효과:

위 사진은 실제 제가 사용하는 어플의 스크린샷입니다.

사용자 정의 라디오 버튼 체크박스 효과를 구현하기 위해 글꼴과 결합된 CSS3를 사용하는 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!