Increase the spacing between the scrollbar and the border

Looking to create some breathing room between the scrollbar and the right border of my text area. I've tried adjusting the margin-right/left values in -webkit-scrollbar with no success. Here's my style component:

const FormTextArea = styled.textarea`
display: flex;
flex-direction: row;
align-items: center;
padding: 12px;
width: 316px;
height: 216px;
background: #FFFFFF;
border: 1px solid ${props => props.error ? '#B42F08' : '#809BAF'};
border-radius: 4px;
margin-top: 16px;
margin-left: 20px;
&:focus {
    border: 1px solid #3BB0C9 ;
}

::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #B3B4B6;
    border-radius: 10px;
  }
resize:none;
   &::placeholder {
        color:#808285
    }
    &:focus , &:active {
        outline: none !important;
    }
`;

This is how my current text area appears:

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

Wanting to keep the scrollbar as it is now, but add a 4px margin from the border. Any suggestions? Thanks!

htmlcssscrollbarstyled-componentsmargin

Answer №1

const StyledFormTextArea = styled.textarea`
display: flex;
flex-direction: row;
align-items: center;
padding: 12px;
width: 316px;
height: 216px;
background: #FFFFFF;
border: 1px solid ${props => props.error ? '#B42F08' : '#809BAF'};
border-radius: 4px;
margin-top: 16px;
margin-left: 20px;
&:focus {
    border: 1px solid #3BB0C9 ;
}

::-webkit-scrollbar {
    width: 18px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #B3B4B6;
    border-right: 10px white solid;
  }
resize:none;
   &::placeholder {
        color:#808285
    }
    &:focus , &:active {
        outline: none !important;
    }
`;

To customize the scrollbar in this design, enhance the ::-webkit-scrollbar-thumb by adding a border-right and increasing the width of ::-webkit-scrollbar.

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

Tips for implementing Material colors in React's styled components

Can React styled components utilize Material UI colors? If so, what is the correct syntax to do so? I attempted the following approach: import styled from 'styled-components/macro'; import blue from '@material-ui/core/colors/blue'; imp ...

reactjsmaterial-uimaterial-designstyled-components

I'm struggling to make my div display inline

My div elements are not displaying inline, I'm thinking maybe I shouldn't use the nav and div structure like this. But starting over again seems like a lot of work. How can I fix this issue? Just so you know, I'm only on my 4th day of learn ...

htmlcss

Issue with Tailwind and MUI integration causing unanticipated error with white buttons in NextJS Project

I'm in the process of developing a project using NextJS, TailwindCSS, and MUI React UI library. While integrating an MUI Button into my project, I noticed that the button's color remains white despite styling changes. https://i.stack.imgur.com/ ...

cssreactjsmaterial-uinext.jstailwind-css

I could use some input on the best way to make a background video fill the screen while incorporating overlay text

Struggling to make the background video fit perfectly on all devices and browsers? While it looks great in Chrome now, I'm still facing some clipping issues with IE Edge. Any experts out there who can offer their validation or suggest improvements? I ...

htmlcss

Drawing the canvas is taking place prior to the image being fully loaded in JavaScript

Currently, I am in the process of creating a collage using images that are all sized at 174x174 pixels. The images are stored on my server, and while my program can locate them successfully, it requires me to click the "save image" button twice for them to ...

javascripthtml

When the ::after pseudo element is utilized for creating a bottom border, it will display following each individual list item contained within the specified div

I have been using a pseudo-element to create a division line between sections, and it was working perfectly until I added a list of items. Now, the division line is appearing after every <strong> and <li> tag. I have tried various approaches, s ...

htmlcsspseudo-element

The function of slidetoggle is malfunctioning when clicked

I currently have two dynamic containers with one displaying grouped boxes, quantities, and totals, while the other shows detailed information. Both container values are added dynamically at runtime. By default, the grouping container is displayed on the p ...

javascriptjquerycss

Equal spacing title in horizontal menu with Bootstrap design

Is there a way to evenly distribute menu links with varying text lengths in equal width bootstrap columns? Adjusting the column class between col-md-1 and col-md-3 doesn't seem to give accurate spacing. If you want to see, I've set up a fiddle h ...

csstwitter-bootstrap

Clearing Up CSS Height Definitions

Based on my observations from other posts, it seems that to establish the height of an element in percentages or pixels, etc., the parent element's height also needs to be explicitly defined. This implies that the height settings must be specified all ...

htmlcssheight

Having trouble displaying Json data on an HTML page?

I am trying to incorporate a local JSON file into an HTML page using JavaScript. I have successfully loaded the data from the JSON file into the console, but I'm encountering issues when trying to display it on the HTML page. Could someone please revi ...

javascripthtmljson

Struggling with a CSS problem that jQuery can't seem

I recently experimented with Infogrid on my website. After adding a header and footer, I noticed that the text in the last block of iron man was being cut off. Even though I removed overflow:hidden; from the body and html, the issue persisted with the te ...

jqueryhtmlcss

Is there a way to programmatically toggle a button's enabled state depending on the content of a text input field?

I want to create a functionality where a button will be enabled if the value in a textbox is 'mypassword'. If it's not equal to 'mypassword', then the button should be disabled. I've attempted the code below, but it doesn&apos ...

javascripthtmljquery

Modify the background color of four results with the help of PHP

With php, I am looking to dynamically change the background color of a td based on the number within it. While this can be achieved using CSS by assigning different classes to each td with specific colors, I prefer a more straightforward method for mainten ...

phpcssbackground-color

Show product name when hovering over the image

Trying to achieve a hover effect where product titles appear in a contained box when hovering over the product image on the bottom overlay, instead of below the image itself. Tried CSS code recommended by Shopify, but it had no effect: <noscript> ...

cssshopifymousehover

Tips for adding an additional div inside a navigation container, evenly spacing objects, and aligning the search bar to the right

I'm currently working on designing a simple navigation bar but I'm facing difficulties in aligning the elements correctly. See my progress here: https://jsfiddle.net/zigzag/bL1jxfax/ Here are my objectives: 1) Ensure that the navigation bar rea ...

jqueryhtmlcss

"Typescript throws a mysterious 'Undefined value' error post-assignment

I'm currently working on a task to fetch my customer's branding information based on their Id using Angular. First, I retrieve all the customer data: this.subscription = this.burstService.getBurst().subscribe(async(response) => { if (r ...

javascripthtmlangularjstypescript

Extracting information from JSON using arrays

I'm facing a bit of a challenge with this one. I've been trying to use jQuery on my website to update an element. It works perfectly fine without using an array of data in JSON, but as soon as I introduce an array of data, it stops functioning. I ...

javascripthtmljqueryjson

Styling a parent element when it is in focus using CSS3

Is there a way to apply a style to the parent element when an input is in focus? input:focus { background-color:yellow; } For example, if we have the following HTML: <div class="foo"> <input type="text /> Hello </div> I ...

htmlcss

What is the best method for incorporating success icons into my website with vue.js?

Hey everyone, please excuse my lack of expertise as I am a beginner in this field. I'm trying to incorporate success icons into my website using bootstrap or similar tools, but I'm unsure of how to implement the if statement below. If anyone co ...

javascripthtmlvue.jsbootstrap-4

Seeking assistance with implementing Styles using the .css() function in Jquery. Any guidance is appreciated

This particular style is exactly what I am looking for. body{ background: url("img/Background_Home.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; ...

jquerycssbackground