Personalized Firefox Scrollbar - Rounded Corners

I have successfully customized the default CSS of browser scrollbars for Chrome and Edge, but I am facing issues with Firefox. Is there a way to sync the scrollbar styling in Firefox with Chrome and Edge? Currently, I am unable to apply border radius to the scrollbar in Firefox.

Here is the code I have used:

/* Custom Scroll Bar */

/* Works on Firefox */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #65676a #1e1f22 !important;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 1.2rem !important;
  height: 1.2rem !important;
}

*::-webkit-scrollbar-track {
  background: #1e1f22 !important;
}

*::-webkit-scrollbar-thumb {
  background-color: #65676a !important;
  border-radius: 2rem !important;
  border: 0.3rem solid #1e1f22 !important;
}

*::-webkit-scrollbar-corner {
  background: #1e1f22 !important;
}

In addition, I am using Angular Framework. If there are any Angular libraries available to modify the scrollbar, please share. I have attempted ngx-scrollbar but encountered some build issues with it.

https://i.stack.imgur.com/yT9d8.png

https://i.stack.imgur.com/jUmPg.png

htmlcssangularfirefoxscrollbar

Answer №1

To achieve a custom scrollbar in Firefox using CSS, you may need to explore options beyond the usual methods.

While Firefox does not support the ::-webkit properties due to not using webkit engine like Chromium-based browsers do, there are still some standard properties like scrollbar-width and scrollbar-color that it accepts.

If having a customized scrollbar is crucial for your design, consider using a non-native scrollbar replacement like 'perfect scrollbar' from Github or other similar alternatives available online. Keep in mind that such replacements may come with their own set of challenges, so choose wisely.

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

If the selected tab matches, collapse it using jQuery

When utilizing the jQuery accordion, I am looking to collapse if the currently active tab is selected. If I click on the same tab again, nothing happens. However, if I click on another tab, the activated tab changes accordingly. Check out an example on j ...

javascriptjqueryhtmltabs

Implementing the map function in ReactJS to showcase data on the user interface

I seem to be facing an issue while attempting to utilize an array of data to display a <ul> element. Despite the console.log's working correctly in the code provided below, the list items fail to show up. <ul className="comments"&g ...

javascripthtmlreactjs

Tips for dynamically updating the id value while iterating through a class

Here's the HTML snippet I am working with: <div class="info"> <div class="form-group"> <label class="control-label col-sm-2">Title</label> <div class="col-xs-10 col-sm-8"> <inpu ...

javascriptjqueryhtmlcss

The presence of double quotes in stringified JSON is undesired

I am currently working on a weather forecasting website where the API returns pure JSON data. However, when I convert this data to a string and add it to an element in order to display it on the webpage, I encounter a problem with double quotes appearing. ...

javascriptjqueryhtmljsonstringify

Retrieve all users using Auth0 with Angular 2

I am trying to retrieve all users from auth0 using angular2 by following the documentation provided at https://auth0.com/docs/api/management/v2#!/Users/get_users. Here is what I have attempted so far. I understand that I need to include the access token, ...

angularjwtauth0

Tips for developing a collaborative service for utilization across numerous Angular applications

Is it feasible to develop a shared service that can be utilized in numerous Angular applications? And if so, how? For instance, similar to how we create an Angular library that can be accessed externally by packaging it into an npm package. Is it possible ...

angular

Padding on hover for navigation bar dropdowns

Having issues with a drop-down navigation menu that works fine except for the "videos" item. The hover color change doesn't cover the entire width due to padding settings. Struggling to fix this without affecting the "photography" item. Need help figu ...

htmlcss

Adding a click function to a div individually when they share the same class in HTML

My goal is to include 4 unique divs inside a timeline container: This is how I envision the structure: <div id="timeline" > <div class="timeline-bar t-1"></div> <div class="timeline-bar t-2"> ...

javascriptjqueryhtmlcss

Angular 2 - ERROR: The value of 'ngClassUntouched' expression has been modified after the initial check

The error message is as follows: angular2.dev.js:23597 EXCEPTION: Expression 'ngClassUntouched in myComponent@7:12' has been modified after it was checked. Previous value: 'true'. Current value: 'false' in [ngClassUntouched ...

angularangular2-forms

Show array elements in Angular framework

I need help with displaying a list that contains three columns: menu, menuItem, and order. The desired display format is to show menu and menuItem ordered by order as follows: Menu 1 : order 200 Menu 2 : order 230 Menu 3 : order 250 Menu item 1 : order 2 ...

angulartypescript

Creating an interactive table with the power of FPDF and PHP

I have developed a unique Invoice System that allows users to customize the number of headings and fields using FPDF in conjunction with PHP. Subsequently, I can input the heading names and field values into HTML input fields. However, I am encountering a ...

javascriptphphtmlfpdf

Changing an image into a background image

I currently have functional code that retrieves an image inside a div. However, upon checking it on mobile devices, the image appears too small. When I attempt to increase its height, it becomes disproportionate. As a solution, I am attempting to set the i ...

phphtmlcss

Having trouble choosing multiple options from autocomplete drop-down with Selenium web-driver in Python

I am currently in the process of automating a webpage built with Angular that features an auto-complete dropdown with numerous elements. My goal is to click on each individual element and verify if it populates all the fields below accordingly. Below is th ...

javascriptpythonangularseleniumselenium-webdriver

Elements styled as inline blocks with static dimensions, irregular in size

Is there a way to ensure that all three boxes are displayed at the same level? Currently, box 2 appears below box 1 and 3 due to having less content. I believe there must be some styling element missing to make each div display at an equal level regardless ...

htmlcss

Conceal mat-table column when form field is empty

As a newcomer to the world of programming, I am currently tackling a table that includes form fields for filtering purposes. My goal is to dynamically hide or show table columns based on whether a form field has a value or not. In my table.component.ts ...

angulartypescriptangular-materialangular-formsmat-table

Steps for making a button with both an image and text:

I am in the process of designing a basketball-themed website and I am looking to incorporate custom icons/buttons that link to various pages on the site. My vision is to have a unique button that features a circular image with accompanying text below it. ...

htmlcss

How can I change the text of a single button by clicking on it without affecting the other buttons that share the same

Currently, I am implementing a posting system where posts can be added using a button. The posts have two additional buttons - one to show/hide content and the other to delete content. I am utilizing jQuery's slideToggle event to toggle the visibility ...

javascriptjqueryhtmlcssbootstrap-4

Struggling to position search form to the right side of an <li> element

I'm having trouble aligning my search bar to the right side of the navigation menu items. HTML: <body> <div id="navbox"> <nav id="nav"> <ul id="nav"> <li><a href="#">Home< ...

htmlcssalignmentsearchbar

Is there a way to occupy the extra space while working with an inline unordered list?

Using this unique CSS code, I've managed to give my unordered lists a touch of elegance: ul, li { padding: 0px; margin-left: 0px; margin-bottom: 0px; display: inline; } li { border: solid 1px #333333; margin-right: 5px; padding: 2p ...

htmlcss

Adjusting the width of columns in a flex layout using Bootstrap 4

On mobile, I am attempting to rearrange some elements in a different order. Currently, this is what I have: https://i.stack.imgur.com/fY3PQ.png Below is the HTML code: <main> <div data-color="yellow"></div> <div class="wrapper"& ...

cssbootstrap-4flexbox