The progress bar is visually enhanced with a border style that doubles as a background color

While experimenting with a jsfiddle to create an animated progress bar, I stumbled upon something peculiar. I had a single CSS rule applied to the progress tag:

progress {
    border:2px solid #ccc;
}

Prior to adding this CSS rule, the progress bar looked like this:

<progress value="22" max="100">
</progress>

After applying the CSS, it transformed into this:

progress {
  border: 2px solid #ccc;
}
<progress value="22" max="100>
</progress>

I'm puzzled as to why such a small modification in the CSS has such a significant impact on the appearance of the progress bar. Specifically, I'm curious about where the unexpected green color is originating from.

htmlcss

Answer №1

Absolutely! progress elements are unique in that they act as replaced elements, deviating from the behavior of regular elements.

By default, browsers showcase them in a visually pleasing manner. However, making adjustments to them prompts browsers to revert to a more standard display format to accommodate your styles.

The same phenomenon occurs with button elements.

.border { border: 1px solid; }
<progress value="70" max="100"></progress>
<button>Button</button>
<hr />
<progress value="70" max="100" class="border"></progress>
<button class="border">Button</button>

Answer №2

Whenever something is added, the bar's styles are reset to their basic settings. If you're interested in learning more, check out the HTML 5 Progress Element.

The issue arises when different browsers like -moz and -webkit- render things differently.

To achieve consistency across all browsers, you need to reset the styles of the <progress> element:

progress{
-webkit-appearance:none;
-moz-appearance:none;
-s-appearance:none;
-o-appearance:none;
appearance:none;
}

A similar problem can occur with the <button> element as well.

Check out this JS fiddle for a visual explanation. The top bar reflects your browser's rendering method, while the bottom one is styled using CSS.

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

inputting an array of strings into the value attribute of an input element using jQuery

Whenever a user writes something in the input field with id="clientAdd" and presses enter, that text should be displayed as a tag inside a div. These tags are then saved as an array of strings, which I want to pass as the value for the hidden input field w ...

javascriptjqueryhtml

Is it possible to use jQuery to load an HTML file and extract its script?

I have a navigation bar with five buttons. Whenever a button is clicked, I want to dynamically load an HTML file using AJAX that includes some JavaScript code. The loaded file structure resembles the following: <div> content goes here... </div& ...

javascriptjqueryhtml

Iterate through each of the selected checkboxes

Can anyone provide guidance on this issue? I am dealing with two web pages - one containing multiple check boxes in a form that POSTs to the second page. Is there a method to pass all the checked checkboxes' values to the second page in order to deter ...

c#asp.nethtmlcheckboxforeach

Manipulating anchor links with jQuery by adding and removing classes

I am struggling to understand why I cannot remove a class from an element and then add a new one. Changing the CSS using .css(...) works, but for some reason .removeClass and .addClass are not functioning. Interestingly, I am able to successfully add and ...

jquerycss

Ensuring DIVs are completely contained within their parent DIV using Fullscreen CSS and a height of

I found a nearly-perfect design using the code below: https://i.sstatic.net/56i2E.png This code provides the layout mentioned: <!DOCTYPE html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://maxcdn. ...

htmlcss

Applying CSS to Align List Items to the Left with Word Wrap

Over at my blog page qavalidation.com, I am faced with an issue related to the alignment of vertical menus with links. When word wrap is applied, there seems to be a misalignment in the left indentation. Can someone provide guidance on the correct CSS sty ...

htmlcssblogs

What is the best way to use requests in python to enter text in a textarea, then scrape the html with bs4, all while the input remains hidden?

I'm working on a script that interacts with by sending a string and receiving one or all of the "fancy text" variations provided by the site. I am struggling to identify the input area within the HTML structure, especially since I aim to use requests ...

pythonhtmlseleniumbeautifulsouppython-requests

Utilizing jQuery to Perform Calculations with Objects

Can someone help me with a calculation issue? I need to calculate the number of adults based on a set price. The problem I'm facing is that when I change the selection in one of the dropdown menus, the calculation doesn't update and continues to ...

javascriptjqueryhtmllogic

Using Bootstrap4 to merge rows into a single column or apply rowspan in Bootstrap

Hey there, I have a specific requirement that I need help with. Check out the image here. I want to enable the LCM information box when the LCM checkbox is checked. Below is my code: <div class="panel-body "> <div class="c ...

javascriptcssbootstrap-4

Tips for centering a div horizontally when it exceeds the width of a mobile screen

My challenge is to create a circular div element that is wider than the mobile screen and perfectly centered. This circular div needs to be an exact circle, specifically targeted for mobile screens. I've attempted to achieve this using the code in th ...

javascripthtmlcss

Creating evenly spaced PHP-generated divs without utilizing flexbox

My goal is to display images randomly from my image file using PHP, which is working fine. However, I am facing an issue with spacing the images evenly to fill the width of my site. This is how it currently appears: https://i.stack.imgur.com/AzKTK.png I ...

javascriptphphtmlcss

Ways to declare a function within the events onMouseOver and onMouseOut

<div align="right" style="border:1 #FF0 solid; background-color:#999" onMouseOver="javascript: function(){this.style.backgroundColor = '#DDD';}" onMouseOut="javascript: function(){this.style.backgroundColor = '#999';}"> Register & ...

javascripthtmlcss

Struggling to animate the selector of a nested div in Jquery?

Despite trying numerous variations, I am struggling to identify the correct selector of a nested div. The goal is to animate this particular div, but since no animations are taking place, I suspect that I have not selected the right element. Here is the a ...

javascriptjqueryhtmlcss

Sibling selector beside not functional

Trying to create a sliding sidebar without using JavaScript has presented me with a challenge involving an adjacent sibling selector that just won't function as expected. Here is the code snippet causing the issue: .sidebar { position: fixed; ...

htmlcss

Creating a menu header similar to Gmail's design is a great way to

How can I create a fixed menu similar to the one in Gmail? I've attempted using CSS, but the div remains centered instead of sliding up on scroll like the Gmail menu. View in full-size image I've experimented with CSS properties, here's an ...

javascripthtmlcssgmail

I can only use innerHTML once in my React application

I am attempting to clear my container div when the user clicks the search button in order to remove all existing search results. However, I am encountering an issue where using innerHTML to clear the container div only works the first time. If a second sea ...

javascripthtmlreactjsreact-nativereact-redux

Utilize JavaScript to compute and implement a deeper shade of background color

To dynamically apply darker shades of background using JavaScript, I have devised the following code. .event-list .bg{ background:#eee; padding:5px; } .grid .event-list:first-child .bg{ background: #2aac97 } .grid .event-list:nth-child(2) .bg{ backgrou ...

javascripthtmlcsscolors

Using an onclick function to increment and decrement values

Can anyone help me figure out how to reverse a function onclick? Here is the function: var theTotal = 0; $('button').click(function(){ theTotal = Number(theTotal) + Number($(this).val()); $('.total').text(theTotal); }); ...

javascriptjqueryhtml

Is it possible to generate a triangular attachment below a div element?

My designer sent me a unique design and I'm wondering if it's possible to replicate using HTML, CSS, or JavaScript? https://i.stack.imgur.com/spB71.png I believe it can be done with CSS by creating a separate div positioned absolutely under the ...

javascriptjqueryhtmlcss

Python Application Engine - Streamlining Responses from HTML Control Arrays

In my attempt to use App Engine (Python), I am facing a challenge in sending POST values from a variable array of select controls within an HTML form. Each select control is associated with a text describing what the user is rating. For instance, let&apos ...

pythonhtmlgoogle-app-enginepost