CSS3 kombiniert fantastische Schriftarten, um benutzerdefinierte Effekte für Optionsfeld-Kontrollkästchen zu erzielen

Ich sehe oft, wie andere Leute bei Front-End-Arbeiten einige schöne Kontrollkästchen oder Optionsfelder implementieren. Aus aktuellen Projektgründen sehen viele Optionsfelder und Kontrollkästchen sehr hässlich aus, also habe ich mich aus einer Laune heraus dazu entschlossen, meine eigenen zu erstellen . Habe es wieder gemerkt.

1. Fügen Sie zuerst den CSS-Code hinzu:

1. Unter anderem habe ich ihn in Form von Kommentaren geschrieben; >Ich habe den Z-Index basierend auf den anfänglichen Positionierungsüberlegungen festgelegt. Wenn jemand ihn hier verwenden möchte, denken Sie selbst darüber nach.

2. 2. Der endgültige Effekt:

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

Das Bild oben ist der eigentliche Screenshot meiner Anwendung.

Ich sehe oft, wie andere bei Front-End-Arbeiten einige schöne Kontrollkästchen oder Optionsfelder implementieren. Aus aktuellen Projektgründen gibt es viele Optionsfelder und Kontrollkästchen. Der Rahmen sah hässlich aus, also beschloss ich aus einer Laune heraus, es selbst zu machen.

1. Fügen Sie zuerst den CSS-Code hinzu:

Unter anderem habe ich ihn in Form von Kommentaren geschrieben; >Ich habe den Z-Index basierend auf den anfänglichen Positionierungsüberlegungen festgelegt. Wenn jemand ihn hier verwenden möchte, denken Sie selbst darüber nach.

1. 2. Der endgültige Effekt:

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

Das Bild oben ist der eigentliche Screenshot meiner Anwendung.

Weitere verwandte Artikel, die CSS3 in Kombination mit Fontawesome-Schriftarten verwenden, um benutzerdefinierte Optionsfeld-Checkbox-Effekte zu implementieren, finden Sie auf der chinesischen PHP-Website!

Vorheriger Artikel: Wie sollte man denken, wenn man ein Programm schreibt?

-->