Change the color of a div element using only css

Question

I have the following buttons. buttons.

This post helped me out. However, every time I click on anything else, the color change of my button disappears. How can I keep the button colored orange, until I click on a different one?

Here is my css:

.circle-button{
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    background: var(--button-background, rgb(110, 109, 105));
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 5px;
    margin-bottom: 5px
}

.circle-button:focus{
    outline: none;
    --button-background: rgb(231, 153, 8);
}
.circle-button:visited{
    --button-background: rgb(153, 13, 130);

}

here is my html:

<div class="circle-button" *ngFor="let record of imageRecords; let i = index" tabindex="{{i}}" ></div>

This is going to require Javascript, or JQuery if you prefer. — Maharkus, Dec 05 '17 at 15:14
This is an angular application. I have no direct DOM element access. I need to do this strictly with css or end up having to use viewChild. — M.Nar, Dec 05 '17 at 15:19

score 1 · Accepted Answer · answered Dec 05 '17 at 15:18

Since you're using angular, use class for active div:

CSS:

.circle-button{
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    background: var(--button-background, rgb(110, 109, 105));
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 5px;
    margin-bottom: 5px
}

.circle-button.active {
    outline: none;
    --button-background: rgb(231, 153, 8);
}

HTML:

<div class="circle-button" *ngFor="let record of imageRecords; let i = index" tabindex="{{i}}" [class.active]="currentTab == i" (click)="currentTab = i"></div>

Change the color of a div element using only css

1 Answers1