designing additional space within textarea's scrollbar

Can someone help me with my text area issue? This is how it looks likehttps://i.sstatic.net/zfcbP.png

I am trying to reduce the scroll height so that it fits within its box. Although there is padding in the text area, it doesn't apply to the scrollbar. I have read about using properties like scroll-height, padding, margin, and start, but I'm having trouble getting it right probably because of my limited experience with those properties.

textarea {
  resize: none;
  scroll-padding: 50px 0 50px 0;
  width: 450px;
  display: block;
  padding: 12px 15px 15px;
  border-radius: 30px;
  border: 2px solid #d0adff;
  outline: none;
  font-family: acumin-pro, sans-serif;
  font-size: 1.3em;
  color: rgb(90, 90, 90);
}
<textarea placeholder="Message" name="message" cols="30" rows="10"></textarea>

css

Answer №1

I discovered that the best course of action is to conceal it.

textarea::-webkit-scrollbar {
  display: none;
}

Answer №2

Apologies if I misunderstood your request, but I believe this solution should work:

Please note: The scrollbar may not display unless you specify a background color for it, so feel free to customize it to suit your needs and make it visually appealing :)

 textarea {
      resize: none;
      scroll-padding: 50px 0 50px 0;
      width: 450px;
      display: block;
      padding: 12px 15px 15px;
      border-radius: 30px;
      border: 2px solid #d0adff;
      outline: none;
      font-family: acumin-pro, sans-serif;
      font-size: 1.3em;
      color: rgb(90, 90, 90);
}
textarea::-webkit-scrollbar {
  width: 10px;
}

textarea::-webkit-scrollbar-track {
  background: #f1f1f1;
  margin-top: 25px;
  margin-bottom: 25px;
}

textarea::-webkit-scrollbar-thumb {
  background: #888;
}
<textarea placeholder="Message" name="message" cols="30" rows="10"></textarea>

Answer №3

Appreciate the help! I decided to create a custom design around the text area, removing the border and outline for a cleaner look.

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 adding style to a child component from a parent component with multiple child components

I am faced with a situation where I have a child component in the form of a spinner that I need to display in two different places, each with its own unique style. In order to achieve this, I have attempted the following approach: my-loading-overlay ::ng-d ...

cssangularparent-child

Sending a Boolean value from a child component to its parent state in React JS

Within my application, I have implemented a login feature in the navbar component. However, I am encountering an issue with updating a variable in the main component upon successful login. Although I have successfully managed to set up the login functional ...

javascriptcssreactjsjsx

The alignment of the Nivo Slider is off-center

Visit to see that the Nivo Slider is not properly centered on the background. I am unsure why this is happening. (Please disregard the 2nd and 3rd pictures as they are not the correct size, but focus on the 1st one). ...

jqueryhtmlcsspluginsnivo-slider

CSS Issue: When nesting divs, text moves to the top of the second page

Currently, I am using the following HTML and inline CSS: <div style="width: 975px; clear: both; float: left; text-align: left; margin: 0; background-color: #D3D3D3;"> <div style="width: 384px; float: left; height: 20px; margin: 0;"> ...

asp.netcss

Verify whether a checkbox is selected and then add a specific style to the parent element using jQuery

Here is a list with checkboxes: <ul class="cate_select_ul"> <li> <!-- outer checkbox A --> <label><input value="251" type="checkbox" name="post_category[]">Automobiles &amp; Transport</label> ...

jquerycsscheckbox

Can CSS be utilized to determine the present height of an element?

My attempt to align an element using a certain method has hit a snag when trying to retrieve the current height of the element using CSS. Below is the code that works, albeit with some extra parts: section{ margin-top:calc(50vh); margin-bottom:ca ...

htmlcss

Styling JavaScript strings with CSS - JavaScript/CSS Integration

I am trying to display a tooltip on hover using the data-tip attribute, but I am facing limitations with it only accepting strings. As a workaround, I have adopted the following approach: var title = "Hello World"; var online: "Last Online 2 mins ago". ...

javascriptcssreactjs

Toggle between light and dark mode with React

I am in the process of creating a simple dark/light toggler button using React. Currently, I have developed a toggler component with a state defined as: this.state = {style: './App.css'} I have also created two functions – one that changes thi ...

javascripthtmlcssreactjs

Can someone guide me on the process of creating responsive text overlay on an image using Bootstrap 4?

Seeking a solution for making the letters inside an image responsive without using media queries, only utilizing Bootstrap grid. Currently, when resizing the screen, the letters overlap each other instead of maintaining their proportions. Below is the CS ...

cssbootstrap-4

Converting from CAPS lock to using the capitalize property in CSS

Is there a way to transform a sentence that is all in CAPs lock without changing it? This sentence is part of a paragraph, and I am looking for a CSS solution (maybe with a little Jquery) that works reliably across most devices! I have come across similar ...

htmlsentencecss

The loading indicator is not appearing inside the designated box

I have successfully implemented a loader using jQuery and CSS to display a gray background during an AJAX call. However, I am encountering an issue where the loader and background are being displayed across the entire page instead of just within a specific ...

javascriptjqueryhtmlcss

What causes Bootstrap to cut off text in buttons?

My button text is getting truncated for some unknown reason. Here is the HTML code: <input class="btn btn-default" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/> And this is how it appears: https://i.sstatic.net/Sr6Z0.png I hav ...

htmlcsstwitter-bootstrap

Use a Font Awesome Icon in case the background image is unavailable

I need a straightforward way to display a Font Awesome icon in place of an unavailable image. Here is the code I am currently using: <div class="notAvailableIcon" style="background-image:NotAvailable.jpg"> </div> Here is the CSS: .notAvailab ...

htmlcssfont-awesome

CSS: Adjusting the top margin of a font

I admit, the title of this question may not be the most creative, but I've hit a wall in my search for answers. It seems like I must be missing something fundamental in CSS, or perhaps my search terms are just off. Here's the issue: I have a con ...

cssfontsmargin

Is it possible for the bootstrap grid system to utilize the width of the parent element "container-fluid" as its media query?

Within Bootstrap 5.2, the grid system's breakpoints are determined by the width of the screen through @media. While this approach works well for most cases, it becomes challenging when dealing with nested grids. In my current project, I am utilizing ...

csstwitter-bootstrapbootstrap-5bootstrap-grid

Looking to implement a CSS banner image for seamless customization across multiple pages

Is it possible to change the banner image easily in the CSS without having to update every HTML page? I don't want the image source to be directly on the HTML pages. How can this be achieved? Additionally, there are already two references in the CSS: ...

htmlcss

Switch Cursor on Movable Area in Electron

Working on a project in Electron and having some trouble with a frameless window. I have designated certain top areas as draggable using -webkit-app-region: drag, but the cursor will not change as expected. Although this code snippet won't make the e ...

javascriptcsselectronelectron-builder

The picture within the bootstrap popover is spilling out of the popover

I need help resolving an issue on my webpage where images in popovers overflow when they reach a certain size. I used an online demo to create the page, but now I'm encountering this problem. How can I fix it? Check out the Js Fiddle for reference: h ...

csstwitter-bootstrapbootstrap-4popover

The character codes for symbols in a unique font available at fontello.com

Is there a way to identify the charCode for a glyph in a custom font? In order to keep my website lightweight, I have designed a custom font with only the 5 icons from FontAwesome that are necessary using . These icons will replace the characters from the ...

cssfont-awesomeglyph

Eliminating the set height causes the slider to initially collapse upon loading

After successfully creating a basic responsive slider with vanilla JavaScript, I have encountered an issue that I cannot seem to resolve on my own. I am reaching out to the community in the hopes of finding some assistance. Please take a look at the demo ...

javascripthtmlcss