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

PHP is having trouble updating the database when multiple radio buttons are selected. It appears that only the most recent radio button selected will be updated in the database

In my form, there are 2 numbers and 4 radio buttons for each. Only one option can be selected per number. When the form is submitted, only the database for question 2 will be updated. However, if question 2 is left blank, then question 1's database w ...

phphtmlmysql

Sending JSON data to Python CGI script

I've successfully set up Apache2 and got Python running without any issues. However, I'm facing a problem with two pages - one is a Python Page and the other is an HTML page with JQuery. Could someone guide me on how to correctly make my ajax p ...

jquerypythonhtmlajax

Unable to vertically scroll on a position fixed element

I recently created a unique VueJS component that enables vertical scrolling. Within this component, there are two elements each with a height of 100vh. At the bottom of the component is a fixed position div. Interestingly, when I try to scroll down using m ...

htmlcssvue.jstailwind-css

Tips for positioning a div between two vertically aligned input elements

I'm trying to figure out how to place a div between two inputs with the same height and vertically aligned. It seems like a simple task, but for some reason, the code below isn't working: input{ width: 35%; border: 1px solid #A7A7A7; ...

htmlcss

Utilize CSS styling for elements persistently, even following a postback event triggered by

In my asp.net app, I have multiple hrefs with dynamic Ids that all share the same CssClass called MyClass. I am looking to hide these buttons based on a certain condition. Initially, I used the .ready function: $(document).ready(function() { if(condit ...

asp.netjquerycss

Stable placement in browsers using webkit technology

Having trouble with fixed positioning on webkit browsers. Works fine in Firefox, but can't seem to solve the issue. You can see the problem here: When clicking on a project, a page is loaded using jQuery's .load() function. On this page, there ...

jquerycss

Does the value of an Angular reactive form control only reflect what the user inputs?

I am working with a reactive form where I need to extract values and assign them to a variable defined in an interface. The form is populated using the Google Places API, which disables user interaction with all controls except for the initial address inpu ...

htmlangulartypescriptangular-materialangular-reactive-forms

What is the method to extract div text using Python and Selenium?

Is there a way to extract the text "950" from a div that does not have an ID or Class using Python Selenium? <div class="player-hover-box" style="display: none;"> <div class="ps-price-hover"> <div> ...

pythonhtmlseleniumweb-scraping

Issues arising from utilizing Twitter Bootstrap 3.1.x, the box-sizing property, and Revolution Slider

I'm currently working on a PyroCMS theme that is built with Twitter Bootstrap 3.1.x and includes Revolution Slider. However, I've encountered an issue where the property box-sizing: border-box; creates an unwanted grey border as shown in the imag ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for submitting a form using javascript while preventing the default action

Looking for a way to submit a form in Javascript and prevent the default action? Let's explore how you can achieve this. Initially, my HTML form with the ID "contact_form" had an input element like so: <input id="contact_send_msg" type="submit" val ...

javascripthtmlajaxforms

Learn how you can store checkbox values in an array when a checkbox is clicked by utilizing AJAX

Creating checkboxes in HTML <input type="checkbox" name="options[cid]" value='1' onChange="chkdeptCount(this.value)" class="test"> <input type="checkbox" name="options[cid]" value='2' onChange="chkdeptCount(this. ...

phpjqueryhtmlcssajax

Gradually shifting alignment of Bootstrap tooltips

I am encountering an issue with Bootstrap tooltips They seem to be progressively off-center Below is the code I am using for the icons {{#each guilds}} <div class="col-sm-1"> <a href="/dash/{{this.id}}"> <div class="gicon"> ...

cssbootstrap-4handlebars.js

Use 'data-toggle='button'' in Angular component only once the condition is validated

Looking to verify a certain condition upon clicking, and if it evaluates to true, toggle the element that was clicked <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active" (click)='example ...

htmlangularuser-interfacebootstrap-4

Turn off the autofill option for passwords in Google Chrome

Is there a way to prevent the password autocomplete dropdown from appearing when clicking on the password field? In Chrome Version 61.0.3163.100, none of the solutions seem to be working. Screenshot This issue has been raised many times, but setting autoc ...

javascriptjqueryhtmlgoogle-chromeautocomplete

Instructions for extracting the href value from an anchor tag using JavaScript within a specified string

How can I retrieve the href value of the last anchor tag in the provided content string using pure JavaScript, excluding jQuery? var contents = '<div id="content"><a href="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba ...

javascripthtml

Uploading and downloading files to a localhost server using PHP

Currently facing an issue where I have successfully uploaded a Picture, PPTX, and PDF file to the database server. However, when viewing them in the browser: The Picture displays normally. However, The PDF file automatically downloads upon trying to view ...

phphtmlpdfxampp

Identifying Browsers using CSS

I am struggling to understand why my HTML5 website appears differently in each browser. It seems like a CSS issue, but I can't pinpoint the exact problem. Here are screenshots of how the site looks on different browsers: Chrome: Safari: Internet E ...

csshtmlcross-browser

Issue with !important keyword taking precedence not resolved

While working on a navigation bar button, I encountered a specificity conflict with the opacity property. I attempted to use the !important override but it doesn't seem to be taking effect. Any insights into why this might be happening? Here is the H ...

htmlcsscss-specificity

Learning how to utilize various types of buttons in C# and ASP.NET with this

I was following this tutorial: I like everything the same except I want to make the following change: <section> <a rel="external" href="#button" id="button">&#xF011;</a> <span></span> </section> ...

c#jquerycssasp.net

What is the best way to ensure that my drop-down menu items match the size of the parent nav bar?

I'm having trouble creating a dropdown menu using only CSS. Specifically, I am struggling to ensure that the dropdown menu is the same size (width and height) as its parent element. Here is a link to a working example: HERE This is the snippet of HT ...

htmlcss