Styling scroll bars with CSS to modify their appearance

I am trying to alter the appearance of the scroll bar on my webpage. Currently, it has a basic rectangular shape, but I would like it to be more oval-shaped with rounded edges at the top and bottom.

Is it possible to achieve this using CSS? Or is it not possible altogether? I specifically need support for IE10. Below is the CSS code I have for the scrollbar:

.scrollbar-vertical
{
    top: 0;
    right: 0;
    width: 17px;
    height: 100%;
    overflow-x: hidden;
    scrollbar-3dlight-color:#999;
    scrollbar-arrow-color:white;
    scrollbar-base-color:white;
    scrollbar-face-color:#999;
    border-radius:5px 5px;

}
htmlcss

Answer №1

For an excellent starting point, take a look at this page . Please note that these styles will only work for webkit browsers.

If you want to achieve rounded oval shape scrollbars, you can use the following code:

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #D62929;
}

If you haven't tested this yet, consider using a jQuery custom scrollbar as demonstrated on this page:

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

Creating my website with a unique inverse color scheme

I'm looking to change the color scheme of my webpage so that it is inverse (white becomes black and black becomes white) similar to the Dark Reader chrome extension: https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbiee ...

javascripthtmlcss

Show the Yajra datatable's horizontal scrollbar at the bottom of the browser window

When using Yajra datatable, the Horizontal scrollbar typically appears at the bottom of the webpage. However, I am looking to have it display at the bottom of the browser window instead. The datatable is contained within a card. I attempted to achieve thi ...

csslaravelyajra-datatable

When the button is left alone, its color will change

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <bod ...

htmlangularjs

Is there a way to showcase the content of a text file in a sequential manner using Javascript/AJAX?

I am attempting to retrieve text data from a server file and exhibit it within a specific division on my website. Check out the AJAX/Javascript code I have been working with: <body onload="loadXMLDoc()"> <script> function loadX ...

javascripthtmlajax

Customize Joomla content in a component by using CSS within a template that I personally designed

Is there a way to customize the text content of a component in Joomla by editing the body text? The CSS properties for #content are adjusting padding, margin, border, width, height, and background but not affecting font attributes... Inside index.php < ...

cssxmlhtmljoomla1.5joomla-template

Removing an object from a THREE.js scene while eliminating the Ray effect: Tips and tricks

function collisionDetection(bullet, b){ for(var i = collidableMeshList.length-1 ; i>=0; i--){ var collideMesh = collidableMeshList[i]; var v = collideMesh.geometry.vertices[0]; var c = collide ...

htmlwebglthree.js

The Bootstrap dropdown functionality is not working properly and fails to open when clicked

Can anyone help with this Navber code issue? <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;"> <div class="collapse navbar-collapse justify-content-center" id="navbarNav"> <a class="navbar-brand" ...

htmlcss

Sorting a dynamic menu to assign custom classes with PHP

<?php // Select all entries from the menu table $sql1 = $pardConfig->prepare("SELECT id, menu_title, menu_link, parent FROM pard_menu ORDER BY parent, sort, menu_title"); // Create a multidimensional array to conatin a list of items and parents $sql1 ...

phphtmlcssdynamicmenu

Utilizing HTML to emphasize a section of text

Hey there! I have a question related to an image with unicodes. The letter featured in the image was written using unicode characters పా. I'm trying to highlight the white portion of the image, but simply replacing it with ా isn&apos ...

javascriptcsshtml

What could be the reason why my JavaScript code for adding a class to hide an image is not functioning properly?

My HTML code looks like this: <div class="container-fluid instructions"> <img src="chick2.png"> <img class="img1" src="dice6.png"> <img class="img2" src="dice6.png" ...

javascriptcss

How can I change the default selected option for a radio button in a React application?

I am having trouble setting the default checked radio button to lime in my radio button group. Even though I have set lime as the default value, it doesn't seem to work. Here is the code snippet that I am working with and I am looking for a solution ...

javascripthtmlreactjsjsx

ENTER DATE VALUE INTO ANGULAR

SERVICE.TS addP(nome: string, cognome: string, anno_n: string): Observable<any> { return this.http.post<Partecipanti>(this.partecipantiUrl, { nome: nome, cognome: cognome, anno_n: anno_n }, this.httpOptions).pip ...

htmlangular

How can we bring back the '<center>' tag into the HTML standard?

The debate between presentation and relation is the basis for removing the tag from the HTML spec. However: Despite this, some browsers still require/recognize this tag. There are several issues with the alternative options. There are arguable relationa ...

htmlstandardsforum

Adjust the height of the element to match the parent's height

I am working on a design with a structure like this: <section> <h3>Title:</h3> <p>Content that may span multiple lines.</p> </section> section { background: #5E5E5E; overflow:hidden; } h3 { backgro ...

htmlcssheight

Ways to remove a row from a div element in JavaScript without relying on tables

Hey everyone, I'm looking for a way to delete a row within a div when a delete button is pressed using JavaScript. The catch is that I need to accomplish this without using a table, only with div elements. Can anyone provide a solution for me? func ...

javascripthtmlcss

Determining if the user has inputted text in an HTML form

My form includes fields for First Name, Last Name, City, and Email. It is crucial to verify that these fields are not left empty. Upon submission, the form redirects to GetFbId.php, where I aim to insert 5 values into the database: FB_Id, First Name, Last ...

javascriptphpjqueryhtmlforms

"Apply a class to a span element using the onClick event handler in JavaScript

After tirelessly searching for a solution, I came across some answers that didn't quite fit my needs. I have multiple <span id="same-id-for-all-spans"></span> elements, each containing an <img> element. Now, I want to create a print ...

javascriptjqueryclassonclickhtml

What could be causing the unexpected behavior of nth-child?

I'm trying to position an image with the class photo, but unfortunately, the nth-child selector is not having any effect on that particular element. I have searched for various solutions, but none seem to be working! .container { height: 100vh; ...

csscss-selectors

height-full card-header style in bootstrap

https://i.sstatic.net/lT8kk.png Is there a way to align cards in a group without breaking the layout when using height-full in card-header? <div class="pb-5 row justify-content-center"> {% for movie in movie_list %} <div ...

htmlflaskbootstrap-4

Maintaining text in a straight line

My design includes an image floated to the left with text aligned to the right of the image. Unfortunately, the text is too long, causing a line from a paragraph to drop below the image. How can I ensure that the text stays in line with the paragraph and ...

htmlcss