Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to change the color of the checkbox in css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Click the checkbox to find out.

Since our goal is to change the color of the checkbox and other appearance features and behaviors are consistent with the original checkbox, we must first understand the main appearance characteristics and behavior of the checkbox.

1. Appearance feature

1.1. Normal style

Margin:3px3px0px5px

Border:none0

Padding:0

Box-sizing:border-box

Display:inline-block

Line-height:normal

Position:static

Note: in appearance, we must ensure that the layout characteristics are consistent with the original, otherwise there is a good chance that the overall layout will be affected by the replacement of custom checkboxes, resulting in being forced to adjust the layout characteristics of other elements to achieve overall coordination, thus expanding the scope of modification.

1.2. The style that gets the focus

Outline-offset:0px

Outline:-webkit-focu-ring-colorauto5px

Note: the focus style here takes effect only through the keyboard Tab key, but the above style will not take effect if the radio box has been focused by mouse click.

1.3. Set to disabled style

Color:rgb (84pr 84)

two。 Behavior characteristics

The behavioral characteristics of the radio boxes are obviously whether they are selected or not, and the events that change the state of the check, so we must keep providing change events to the outside.

It is also worth noting that after giving the checkbox focus through the Tab key of the keyboard, pressing the Space key will select the checkbox.

With the above understanding, we can start to play with the code!

Cut the crap and play with the code.

435275490-5bb54e2fc18b1_articlex.png

In the image above, the original checkbox is on the left, and our custom checkbox is on the right. The styles from top to bottom are unselected, selected, focus, and disabled status.

CSS part

Label.radio {

/ * make sure the layout features are consistent * /

Margin:3px3px0px5px

Display:inline-block

Box-sizing:border-box

Width:12px

Height:12px

}

.radio _ _ appearance {

If display:block;/* is set to block, it is not affected by vertical-align, so it will not accidentally affect the linebox height of .radio * /

Position:relative

Box-shadow:0001pxtomato;/*box-shadow does not affect the box height like border does.

Border-radius:50%

Height:90%

Width:90%

Text-align:center

}

Label.radiotype = radio] + .radio _ appearance::before {

Content: ""

Display:block

Border-radius:50%

Width:85%

Height:85%

Position:absolute

Top:50%

Left:50%

Transform:translate (- 50% Mo Mo 50%)

Transition:background.3s

}

Label.radio [type=radio]: checked+.radio__appearance::before {

Background:tomato

}

Label.radio [type=radio] [disabled] + .radio _ appearance {

Opacity:.5

}

Label.radio:focus {

Outline-offset:0px

Outline:#999auto5px

}

/ * when the focus is obtained by mouse click, the outline effect has no effect * /

Label.radio.clicked {

Outline:none0

}

/ * the behavior of the custom checkbox is mainly based on the native checkbox, so hide the native checkbox first * /

Label.radioinput {

Display:none

}

HTML part

JavaScript part

Varradios=document.querySelectorAll (".radio")

Radios.forEach (radio= > {

/ / after simulated mouse click: invalid focus style

Radio.addEventListener ("mousedown", e = > {

Vartar=e.currentTarget

Tar.classList.add ("clicked")

Varfp=setInterval (function () {

If (document.activeElementroomtar) {

Tar.classList.remove ("clicked")

ClearInterval (fp)

}

}, 400)

})

/ / after the simulation gains focus through the keyboard, press the `Space` key to perform the selected operation.

Radio.addEventListener ("keydown", e = > {

If (e.keyCode===32) {

E.target.click ()

}

})

})

There are three points to note in this implementation:

1. Pass the mouse click event to the associated input [type=radio] through label, so you can safely hide the checkbox and take advantage of its own characteristics. However, due to the limitations of the label control itself, for example, the focus element is not available by default, keyboard keystroke events cannot be passed to the radio box, and handwritten JS is required even if the tabindex feature is added.

2. When the tabindex is greater than or equal to 0, the element can get the focus. A value of 0 indicates the order in which the focus is obtained according to the location of the element, while a value greater than 0 means that the smaller the element is, the more it gets the focus first.

3. Because the display of the radio box is inline-block, the radio box will affect the height of the linebox. When inline-block is used for the elements in the custom radio box, a slight carelessness in the setting of vertical-align will cause the linebox of the internal elements to be pushed up, resulting in a larger linebox height of the custom radio box. Therefore, the practice of setting the display of internal elements to block is adopted here to directly invalidate vertical-align and improve controllability.

Implemented through opacity:0

Above, we use label to associate display:none 's input [type = radio] to simplify the implementation of custom checkboxes, but we still have to handwrite JS to achieve the behavior characteristics selected by pressing the Space key. Is there another way to make it easier? We just want users to not see the original checkbox, so can't we just set it to opacity:0?!

CSS part

.radio {

/ * make sure the layout features are consistent * /

Margin:3px3px0px5px

Display:inline-block

Box-sizing:border-box

Width:13px

Height:13px

}

/ * the behavior of the custom checkbox is mainly based on the native checkbox, so the native checkbox is transparent and covered with the entire parent element * /

.radioinput {

Opacity:0

Position:absolute

ZMuiindexGlux 1bank * must be overridden on .radio _ appearance to respond to mouse events * /

Width:100%

Height:100%

}

.radio _ _ container-box {

Position:relative

Width:100%

Height:100%

}

.radio _ _ appearance {

If display:block;/* is set to block, it is not affected by vertical-align, so it will not accidentally affect the linebox height of .radio * /

Position:relative

Box-shadow:0001pxtomato;/*box-shadow does not affect the box height like border does.

Border-radius:50%

Height:90%

Width:90%

Text-align:center

}

.radio [type=radio] + .radio _ appearance::before {

Content: ""

Display:block

Border-radius:50%

Width:85%

Height:85%

Position:absolute

Top:50%

Left:50%

Transform:translate (- 50% Mo Mo 50%)

Transition:background.3s

}

.radio [type=radio]: checked+.radio__appearance::before {

Background:tomato

}

.radio [type=radio] [disabled] + .radio _ appearance {

Opacity:.5

}

. radio:focus-within.radio__appearance {

Outline-offset:0px

Outline:#999auto5px

}

/ * when the focus is obtained by mouse click, the outline effect has no effect * /

.radio.clicked.radio _ appearance {

Outline:none0

}

HTML part

JavaScript part

Varradios=document.querySelectorAll (".radio")

Radios.forEach (radio= > {

/ / after simulated mouse click: invalid focus style

Radio.addEventListener ("mousedown", e = > {

Vartar=e.currentTarget

Tar.classList.add ("clicked")

Varfp=setInterval (function () {

If (! tar.contains (document.activeElement) {

Tar.classList.remove ("clicked")

ClearInterval (fp)

}

}, 400)

})

})

This is the end of the content of "how to change the color of the checkbox in css". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.