1. Realization renderings
2. html code
Note: If it is a div, tabindex="1" must be added, otherwise, focus will fail.
<div class="menu_label" tabindex="1">标签1</div>
<div class="menu_label" tabindex="1">标签2</div>
<div class="menu_label" tabindex="1">标签3</div>
<div class="menu_label" tabindex="1">标签4</div>
<div class="menu_label" tabindex="1">标签5</div>
<div class="menu_label" tabindex="1">标签6</div>
3. css code
active: style after the mouse passes over
focus: style after mouse click
.menu_label {
float: left;
border: 1px rgb(67, 150, 202) solid;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 3px;
padding-top: 1px;
border-radius: 15px;
font-size: 10px;
margin-left: 15px;
margin-top: 8px;
color: rgb(67, 150, 202);
/* font-weight: bold; */
margin-bottom: 7px;
}
.menu_label:active {
background-color: rgb(67, 150, 202);
color: white;
}
.menu_label:focus {
background-color: rgb(67, 150, 202);
color: white;
}