CSS implementation Click to change element background color

You can use CSS pseudo-class to achieve the effect of clicking on the color of elements, two pseudo-classes are: Active,: Focus

: Active

: The active selector is used to select the active link. When clicked on a link, it becomes active (active): The active selector applies to all elements, not just the link a element

: Focus

: The focus selector is used to pick the element that gets focus. only elements that receive keyboard events or other user input are allowed: the focus selector.

Because of the above characteristics, if you want to achieve the click-to-color effect, there are the following two ways, the difference between

: Active, the element is discolored when clicked, but the color disappears after clicking

: Focus, the element is discolored after being clicked, and the color does not disappear after clicking

    button:active{    background:olive;    }    button:focus{    background:olive;    }

Online Example: http://jsfiddle.net/vt1bzpsq/

Because elements such as Div cannot accept keyboard or other user events, that is not supported: Focus pseudo-class, which can be supported by adding the TabIndex property: Focus

<DivTabIndex= "1">Section 1</Div><DivTabIndex= "2">Section 2</Div><DivTabIndex= "3">Section 3</Div>

div:focus { background-color:red;}

Online Example: http://jsfiddle.net/mwbbcyja/

CSS implementation Click to change element background color