1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Progress Bar Chrome Style

Discussion in 'CSS' started by Jeremy Benson, Aug 20, 2016.

  1. #1
    I'm not sure why I can't style a progress bar fill color in chrome. I'm setting the color, but nothing is happening. Can someone help? The problem is with #health-bar not turning red. Also trying to turn the bar red in all browsers. Not sure when to use color, or background.
    SEMrush
    Thanks for the help :)

    /* Progress Resets*/
    
    progress,          /* All HTML5 progress enabled browsers */
    progress[role]     /* polyfill */
    {
    
        /* gets rid of default border in Firefox and Opera. */
        border: none;
    
        /* Needs to be in here for Safari polyfill so background images work as expected. */
        background-size: auto;
      
      
    }
    
    /* Polyfill */
    progress[role]:after {
        background-image: none; /* removes default background from polyfill */
    }
    
    /* Ensure fallback text doesn't appear in polyfill */
    progress[role] strong {
        display: none;
    }
    
    
    /* Health Bar */
    
    #health-bar {
    
        color:red;
    
    }
    #health-bar::-webkit-progress-bar {
     
       color: #ffeeee;
    
    }
    #health-bar::-webkit-progress-value {
      
        background: red;
    
    }
    
    #health-bar::-moz-progress-bar {
        background:red;
    }
    
    /* Polyfill */
    #health-bar[aria-valuenow]:before  {
      
        background: black;
    
    }
    Code (CSS):
     
    Jeremy Benson, Aug 20, 2016 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    PoPSiCLe, Aug 20, 2016 IP
  3. Jeremy Benson

    Jeremy Benson Active Member

    Messages:
    349
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    73
    #3
    Thanks for the article. I cut and pasted code, and still no good. I found a solution that works well. HTML5 meter. It's a lot easier to style across browsers, and has a neat feature.

    Min
    Max
    Low
    High
    Optimum

    Each value can have its own color. Neat for games.

    Health bar red at optimum, yellow at high, and black at low :p
     
    Jeremy Benson, Aug 20, 2016 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,327
    Likes Received:
    1,821
    Best Answers:
    244
    Trophy Points:
    515
    #4
    Generally issues like this aren't just why I don't use <progress> I question why it even exists since it's only really useful with scripting... and if it's a scripting only element why the *** does it have a tag?

    Much less the goofball hodge-podge of proprietary values you have to throw at it... There's a reason for something like that I'd just put a div inside a div, set a fixed width on the outer one, and a % width and height on the inner one. Problem solved.

    ... and I'd generate that from the scripting on the DOM instead of crapping all over the markup with scripting only code.
     
    deathshadow, Aug 28, 2016 IP