Modifying the color of a div element solely through CSS styling

I am currently working with a set of buttons, available at this link.

While browsing through this helpful post, I encountered an issue. Whenever I click on another element, the orange color of my button disappears. How can I maintain the orange color on the button until I choose a different one?

Below is the CSS code I am using:

.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);

}

This is how my HTML looks like:

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

Answer №1

If you are working with angular, make use of the class attribute to activate the specific div:

Styles in 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 structure:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a fixed top bar button in Ionic and iOS along with a scrollable list

In my app using Ionic with the iOS platform, I am trying to achieve a specific layout: A header A fixed bar button A scrollable list Here is what I have attempted so far: <ion-view view-title="Account"> <div class="button-bar" style="margin ...

Revamping Tab Styles with CSS

Currently, I am working on a mat tab project. The code snippet I am using is: <mat-tab-group> <mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab> </mat-tab-group> If you want to see the liv ...

Does CSS in the current IE9 beta allow for text shadows to be implemented?

Text shadows look great in Firefox and Chrome. For example, I have a basic website for streaming videos. Unfortunately, there are no shadows in IE9 for me. This is my CSS code: p { color: #000; text-shadow: 0px 1px 1px #fff; padding-bottom: 1em; } ...

How can I bypass hotlink protection for RSS images?

According to the definition, RSS feeds are considered public. When images are displayed within the feed, it is essentially "hotlinking," meaning that the content is being read directly from the Internet rather than your local machine. Is there a specific ...

Angular2: Implement a feature to append textbox input to a span element upon button click

I'm completely new to Angular2 and I could really use some assistance with the following task. I need to take the input from a textbox and add it to a span in HTML. The requirement is to only make changes in the .ts file. I'm having trouble figu ...

How to retrieve data from a nested object in Angular templates

I am working with a "post" object that has an "author" property, linking each post to the author who created it. The "author" property is a nested "user" object with a "name" property. My goal is to access the "name" of the user associated with a specifi ...

Apply a dual-color gradient background vertically

I am trying to figure out how to achieve a two-tone background color in an HTML document. I know this question has been asked before, but I specifically want the colors to be split vertically rather than horizontally. ...

Hide button for the last input form to dynamically remove in jQuery

At first, I hide the remove button when there is only one form. However, if there are multiple forms and the user deletes all of them, I want the last form to remain visible and not be deleted. Can someone assist with this issue? Here is my code: <! ...

Troubleshooting why Angular2 is failing to load external styles in styleUrls

Currently in the process of developing an angular2 application and had envisioned being able to implement distinct styles for public content versus admin content. To my disappointment, it appears that Angular is not accommodating external styles that are l ...

How can I use Angular to download the HTML content of a component when a button is clicked?

Is there a way to generate and download an HTML report directly from a dialog box in Angular 13.2.5 without redirecting the user to a separate page? The dialog box collects user input, and I want a button labeled "Generate" at the bottom of the dialog box ...

Identify the CSS class for the ionic component on the webpage

Currently, I am in the process of developing an application using ionic 2 and angular 2. Within this app, I am utilizing the ionic 2 component known as ModalController. Unfortunately, I have encountered a challenge when attempting to adjust the size of th ...

What could be causing my tabs (such as HOME, ABOUT ME..) not displaying the correct paragraph or section content?

I have set up navigation tabs on my website using anchor tags, but they are currently not linked to any specific paragraphs. I want the corresponding paragraph to be displayed when a tab is clicked, but I'm unsure how to add this functionality using j ...

What could be the reason for the nav icon not displaying?

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Boot ...

Guide on how to showcase the chosen option of a dropdown menu in a table by clicking an arrow icon

I am looking to modify the code below so that instead of pushing data to the selected panel, it pushes data to a table inside the panel. The new data should be added to a new row every time the arrow is clicked. <html> <head> <title>Bo ...

Change the value of the material slide toggle according to the user's response to the JavaScript 'confirm' dialogue

I am currently working on implementing an Angular Material Slide Toggle feature. I want to display a confirmation message if the user tries to switch the toggle from true to false, ensuring they really intend to do this. If the user chooses to cancel, I&ap ...

Unchecked checkbox displays as checked in UI

I am facing an issue with checking checkboxes using JavaScript. Even though the checkbox appears to be checked in the program, it does not reflect the updates on the user interface. If anyone has a solution for this, please share. <!DOCTYPE html> ...

The term "Highcharts does not exist"

I'm encountering an issue with my code: <html> <head> <title><%=sAtaskaitaTitle%></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name=vs_targetSchem ...

change the css back to its original state when a key is pressed

Is there a way to retrieve the original CSS of an element that changes on hover without rewriting it all? Below is my code: $(document).keydown(function(e) { if (e.keyCode == 27) { $(NBSmegamenu).css('display', 'none');} ...

Checking and locating elements using Jquery's distinctive style

Within my code, I am searching for the DIV element that has the class .se and also has the attribute display: block. Once found, I need to retrieve the ID of this particular DIV. Unfortunately, it seems like my current approach is not correct. var usedse ...

Converting jQuery drag and drop functionality to Angular: A step-by-step guide

I have implemented drag and drop functionality using jquery and jquery-ui within an angular project. Below is the code structure: Index.html, <!doctype html> <html lang="en"> <head> <link href="//code.jquery.com/ui/1.10.3/themes/ ...