CODEWITHSUNDEEP
csshtmlmicrosoft-edge
Su_toL
Su_toL

Reputation: 167

Progress bar has a border by default in the Edge browser

I have an issue with my progress bar in Edge (version 25.10586.672.0). By default, the progress bar I've implemented has a border on it. There is no border by default in neither Chrome nor Firefox. I can remove it no problem by setting the CSS property border to none, however there is still a divider line as the bar is being filled (i.e. if the bar is filled halfway, there is a little line between the filled in section and the unfilled section) that does not go away even with setting border to none.

I was curious if there was a particular CSS property I need to modify for this, or perhaps there's another underlying reason why there is a border being set in edge for me? Thanks in advance!

Upvotes: 1

Views: 1359

Answers (1)

Nils Schlüter
Nils Schlüter

Reputation: 1436

The reason for this is that Internet Explorer and Microsoft Edge use some special CSS selectors. In this codepen you can see a working example.

The important CSS Selector is:

progress.with-border-fix::-ms-fill {
  border-color: currentColor;
}

Upvotes: 2

Related Questions