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

Java Selenium encountered an error when trying to switch to a detected frame, throwing a NoSuchFrameException and preventing navigation to the frame

Problem Description: I am facing difficulty in navigating to a specific frame using Chrome v92, although it works smoothly in Firefox. Code Example: @Test void auto_015_5() { int bet = 7; driver.navigate().to("https://boa ...

javaseleniumfirefoxiframeselenium-chromedriver

My requests and responses will undergo changes in naming conventions without my consent or awareness

Initially, I wrote it in a somewhat general manner. If you require more information, please let me know! This is how my C# class appears when sent/received on the frontend: public class Recipe : ICRUD { public Guid ID { get; set; } ...

c#jsonangulartypescriptasp.net-core

What is the best way to customize the endIcon of a styled-component button?

Presented here is a neatly styled button I've created import styled from 'styled-components'; import Button from '@material-ui/core/Button'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; const MyB ...

cssreactjsmaterial-uistyled-components

Unable to access material datepicker by its element id within ngAfterViewInit function

Upon component loading, I am attempting to open the material DatePicker using its element ID (#). However, when I use ngAfterViewInit, it consistently returns an error stating 'Cannot use 'open' on undefined'. Interestingly, the DatePic ...

angularangular-material

Can you reveal a table with the click of a button?

Hi there! I'm a newcomer to the world of Ruby on Rails and I’m currently working on creating a page that includes a date field. Once a specific date is selected, I’d like to generate a table displaying reports from that chosen date. controllers/r ...

htmlruby-on-railsmodel-view-controllerruby-on-rails-5

Prevent the ability to capture photos using the HTML input file feature within an iOS application

Is there a way to restrict users from taking photos within an iOS app that is WKWebView based, and instead only allow them to select photos from their library or iCloud? Currently, I am aware of the ability to force users to utilize the camera with the ca ...

ioshtmlimage-uploadingwkwebview

How to retrieve TypeScript object within a Bootstrap modal in Angular

Unable to make my modal access a JavaScript object in the controller to dynamically populate fields. Progress Made: Created a component displaying a list of "person" objects. Implemented a functionality to open a modal upon clicking a row in the list. ...

javascriptangulartypescript

What is the best way to disable a submit button based on form validity in Angular 4 with ng-content?

Include a form component that consists of an email field, password field, and submit button passed through ng-content. This allows the login form to display a 'Login' button and the register form to display a 'Register' button. Here is ...

formsangularangular2-ngcontent

Title positioned between two buttons in the header

I am trying to add two menu buttons in my header, but the Hamburger menu button is not aligning to the left as expected. Currently, it looks like this: https://i.stack.imgur.com/s5ptT.png Below is the code snippet I am using: <ion-header> <io ...

androidangularionic-frameworkionic2ionic3

I desire to incorporate a subtle fading effect into the script

I have written the script code and now I am looking to add a fade effect to it. Can anyone guide me on how to achieve this? Your help is much appreciated! ※I used an online translator as English is not my native language. Please bear with any awkward ph ...

javascripthtmljquerycss

Perform an Ajax request with JQuery in an HTML document and transfer the response to a different HTML page

This is my first attempt at using AJAX and jQuery to retrieve data from another HTML page. Below is the code I have written: Here is my JavaScript code: <script type="text/javascript> $(document).ready(function() { $('#submit').click( ...

javascriptjqueryhtmlajax

Exploring depths with nested ng-Repeat in Depth First Search

I am dealing with an object that has variable key names, each of which contains nested objects. My goal is to perform a depth-first search (DFS) over this object. For example, consider the following object: object = { "var1" : { "var2 ...

htmljsonangularjsobjectdepth-first-search

Top solution for maintaining smooth navigation across web pages

As I dive into the world of web development, I find myself intrigued by the idea of reusing navigation and banners across multiple web pages. However, despite my research efforts, I have yet to come across a definitive answer. My objective is simple: The ...

phpjavascripthtmlasp.netcss

Ensure data is only fetched in Ngrx if the store is empty

In my application, there are a total of 3 pages: Faculties, Groups, and Specialties. Here is how the interface for these entities is structured: interface Faculty { faculty_id: number; faculty_name: string; faculty_description: string; } interface S ...

angularreduxngrxngrx-store

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

I'm currently working on a basic animation project using JavaScript. I have utilized the Animation class from the Web Animation API. My goal is to create multiple instances of this class in order to animate different elements with varying values and r ...

javascriptcsscss-animationstypescriptweb-animations-api

Alter the class of a div when a key is pressed

Whenever I press the down arrow key, the class of a div changes. However, the class only applies while I keep my finger on the button and gets removed when I release it. I would like the class to remain permanently. What am I doing incorrectly in this code ...

jqueryhtml

Resolving search box setup problem in PrimeNG dataView

I am working on integrating p-dataView with Angular 5 but encountering an error Cannot read property 'split' of undefined at DataView.filter Despite checking the documentation, I have been unable to find a solution to this issue. It seems lik ...

angulartypescriptprimengprimeng-datatable

CSS division nested within the center float division

In my attempt to design a 3-column home layout, I have successfully styled the center, left, and right sections. However, I am facing difficulty in placing two sliders within the middle class. My goal is to have slider1 positioned on top inside the middle ...

htmlcss

Exploring the concept of overflow and minmax behavior in CSS grid

Summary: Example of overflow in nested grid layout on Codepen, and attempts to fix it using CSS grid-template-columns: repeat(16, minmax(0,1fr)); Within the element called container, there are two main elements - summary-wrapper and stats-wrapper The gri ...

htmlcsscss-grid

What is the best way to update the div id by extracting the last digits from a number?

Is there a way to change the div ids using a function? Before: <div id="a_1">a1</div> <div id="b_1">b1</div> <div id="c_1">c1</div> <div id="d_1">d1</div> <button onclick="change()">Change</button& ...

javascriptjqueryhtml