When in the :active state, the background color remains the same

Currently, I am experimenting with CSS buttons for use in ul's as navigation. While I have successfully implemented pseudo classes to achieve most of what I want, I am struggling to change the background color. It is likely a small oversight on my part, but I hope someone else can spot my mistake.

a:Active {
    /* General  */
    /* Size */
    height: 30px;
    width: 100px;
    background-position:0 2px;
    color:#F00;

    /* Stroke  */
    border: 1px solid hsla(0.0, 0.0%, 42.0%, 0.52);
    -moz-border-radius: 0px; /* FF1-3.6 */
    -webkit-border-radius: 0px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
    border-radius: 0px 0px 0px 0px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

    /*  Label  */
    font-family: "Lucida Grande","Verdana","Arial","sans-serif";
    font-size: 0.9em;
    text-align: center;
    font-weight:normal;
    display:block;

    /*  Shadow & Inner Shadow */
    box-shadow:inset 0px 0px 2px hsla(0.0, 0.0%, 65.9%, 0.58);

    /*  Opacity  */
    opacity: 1.000;
}

Answer №1

To create a better visual, include the background-color property in your CSS! Right now you only have the color property.

Answer №2

Have you located the background color yet?

I believe the mistake lies in color: #F00;, it should be changed to background-color: #F00;. Additionally, consider what sandeep mentioned.

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

Tell me about the CSS ruby-align characteristic

While browsing online, I stumbled upon a reference to the ruby-align property that piqued my interest. After searching on w3schools for some examples, I was surprised to find no mention of it anywhere. I remembered that Ruby is a newer tag in HTML5 and de ...

Tips for positioning bootstrap-vue dropdown button items evenly

Can anyone help me align the dropdown button child items horizontally? I've tried customizing it with CSS but no luck. The control link can be found here Check out a sample on Js Fiddle here This is how I expect the design to look like: https://i.s ...

Webkit browsers do not properly clip content with rounded corners when using position:relative

In webkit browsers like Chrome, rounded corners do not properly cut off content when using position:relative; Check out this demonstration. Here is the HTML: <div class="outer"> <div class="inner"> </div> <div> And here ...

How to centrally align an image with HTML tags <p></p>

https://i.sstatic.net/iTBOI.jpg I need help with HTML alignment for my website How can I center align the text with the image? #main__img { text-align: center; height: 80%; width: 80%; } .main__content p { margin-top: 1rem; font-s ...

How can we add a class to a radio button using jQuery when it is checked, and remove the class when it

I'm looking for help with using jQuery to toggle between two radio buttons and display different divs based on the selection. jQuery(document).ready(function($) { if ($('#user_personal').is(':checked')) { $('.user_co ...

Styling radio buttons with CSS

I've been struggling to align my radio buttons next to their labels. Despite numerous changes to the CSS, I can't seem to get my text boxes, radio buttons, and comment box to line up properly. Specifically, the second radio button is causing alig ...

Center-align the text by disregarding the absolutely positioned element

I have created a custom flex table with filtering and sorting capabilities. The filter and sort icons are located in the right corner of the table header. Additionally, users can choose to align the header text left or center. The Issue: When positioning ...

Why isn't Bootstrap validation functioning properly in my Modal?

I am attempting to implement client-side validation using bootstrap, as outlined here: https://getbootstrap.com/docs/4.0/components/forms/#custom-styles The challenge I'm facing is that my form is within a modal. When I click the submit button, nothi ...

I'm looking for a more efficient CSS solution to apply my :before & :after to all menu links collectively, rather than having to add them individually to each one

I have created a CodePen with a working hover effect using :before & :after on li link options. However, I am looking for a more efficient way to globally apply the position of these pseudo-elements without adding separate styles for each link option. ...

Having trouble identifying the source of the margin-right styling being used

I'm facing a perplexing issue with the CSS for my sidebar (#primary) on my website. Even though I haven't specified any margin for the sidebar, it is somehow getting a margin-right of 605px. In trying to solve this, I experimented with relative ...

Separate Your Navbar with Bootstrap 4 Separators

I'm facing a challenge in adding separators within a navigation bar between the navigation items. I am unsure how to evenly space out the padding on these separators next to each navigation item. https://i.sstatic.net/vjYti.png Another issue I encou ...

An iframe perfectly centered both horizontally and vertically, featuring a 16:9 aspect ratio and utilizing the maximum screen space without any cropping

Specifications: It is mandatory for the iframe to be enclosed within a div container as shown in the code below. The container should have the flexibility to adjust to any valid width and height using the vw and vh viewport units. Check the code provided ...

Why is it that Lotus Notes is unable to render this HTML code properly?

I am having trouble with an email that displays properly on every platform except Lotus Notes. Can anyone provide insight as to why this email is not rendering correctly in Notes? Here is a screenshot: img (please note the images are for demonstration pu ...

Enhance your website with a customizable language selection feature using HTML and CSS

Currently, I am in the process of creating a dynamic language selection feature using HTML and CSS. Initially, this is what it looks like: https://i.stack.imgur.com/bhnaA.png Upon hovering over it, this is the effect I want to achieve: https://i.stack.i ...

Use CSS to define the icon's position within the button

<div class="button button-icon topPull"> <div class="button button-icon"><i class="icon ion-android-cart"></i><a class="icon-circle icon-circle-outline" style="position: absolute; right: 0; bottom: 0;"> <i>{{car ...

Tips for preventing text wrapping in off-canvas design

Seeking advice for my Web Application prototype - looking to prevent text wrapping in off-canvas menu paragraphs using CSS or JS. New to building this type of menu, I used an example from W3Schools to achieve the current design. <!DOCTYPE html> ...

Adding text after a div in React-JS using Bootstrap: A quick guide

Just starting out with website development and I have a question. As I practice making this website, I am struggling to figure out how to add the text "To know more about us click here" below the 'Get started' button. I tried adding a simple < ...

Styling CSS shape in front of a div

Having trouble adding an irregular shape before a div. I'm looking to achieve the effect shown in this image: However, I want this effect to cover the entire content of the div, not just the left or bottom. I attempted to use CSS arrows created with ...

Issue with CSS Media Queries: Preventing an Element From Being Affected

As a complete beginner in HTML and CSS, I have a question that may seem silly. Recently, I created this HTML code: * { margin: 0px; padding: 0; box-sizing: border-box; } p { font-size: 14px; font-family: 'Work Sans', 'sans seri ...

Utilizing background images in conjunction with media queries

I have a div <div id="page"> </div> Containing the following css code: #page { background: url('images/white-zigzag.png') repeat-x; } @media (max-width: 600px) { #page { background: url('images/white-zi ...