Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Range input slider thumb has default border radius from browsers #39851

Open
3 tasks done
wolfy1339 opened this issue Mar 31, 2024 · 2 comments
Open
3 tasks done

Range input slider thumb has default border radius from browsers #39851

wolfy1339 opened this issue Mar 31, 2024 · 2 comments
Labels

Comments

@wolfy1339
Copy link
Contributor

wolfy1339 commented Mar 31, 2024

Prerequisites

Describe the issue

When customizing bootstrap and setting $enable-rounded to false, there is still a border radius on .form-range::-moz-range-thumb, .form-range::-webkit-slider-thumb

It seems the browser has a default border radius for the thumb, and you have to explicitly set it to 0

You could pass a fallback value of 0 to the border-radius mixin, and it should correct the issue

Reduced test cases

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.3.3

@julien-deramond

This comment was marked as resolved.

@wolfy1339

This comment was marked as resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: To analyze
Development

No branches or pull requests

2 participants