Styling the resizable textarea background color in Firefox

I am seeking to change the background color of multiple textareas on my website from the default white.

textarea
{
  background-color:Red;
  width:120px;
  height:80px;
}
<textarea>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</textarea>

The code snippet above is functioning as intended, except for when it is applied to a resizable textarea in Firefox that also contains a scrollbar.

In this scenario, both the background and the draggable corner at the lower-right of the textarea turn red, causing an undesirable appearance due to the overlap with the scrollbar.

Is there a CSS-only solution to either color the scrollbar or exclude coloring the draggable corner?

htmlcssfirefox

Answer №1

Regrettably, Firefox does not currently offer the same level of customization for textarea grabbers as other browsers. The most you can do for now is simply disable it with CSS:

textarea {
  resize: none; /* disables resizability */
}

For more options and information, visit this link.

However, in webkit browsers, there are additional possibilities to explore:

You have the ability to customize the grabber itself by changing its background color or even applying a background image:

#textarea::-webkit-resizer { 
   background-color: green; 
}

#textarea::-webkit-resizer { 
   background-image: url(resizer-background.png); 
}

Alternatively, you can hide the grabber altogether – please note that this does not prevent resizing, only hides the visual element:

::-webkit-resizer {
  display: none;
}

We hope this provides a clearer understanding of your options.

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

Painting Magic: Exploring the World of Canvas Zoom and Moves

I'm having trouble implementing zoom and pan functionality for this particular canvas drawing. While there are examples available for images, my case is different since I am not working with images. Any tips or suggestions on which libraries to use wo ...

javascriptjqueryhtmlcanvashtml5-canvas

Optimizing Your CSS for Faster Page Loading

Seeking various opinions here - my goal is to enhance the loading speed of my website, and a suggestion from Google Pagespeed is to remove unused CSS from the CSS file for each page. Currently, I am utilizing a single master CSS file for all pages on the ...

cssseoperformance

Multiline text that appears inline

Is there a way to achieve this output in HTML or using CSS? This is the text: A very long piece of content that wraps automatically onto multiple lines Take note of how the text wraps and aligns on the left side. I am aware that tables can be used for t ...

htmlcss

What is causing the col-auto with the red border to exceed its available height?

For this code, I've utilized version 5 of Bootstrap. In full screen width, the col-auto with the red border seems to be taking up more space than its content. The yellow border marks the available content space inside. I'm curious about what migh ...

htmlcssbootstrap-5

Utilizing Javascript to implement a tooltip feature for dynamically inserted text

I recently incorporated a brief jQuery tooltip plugin into my site. It consists of approximately ten lines of code and works smoothly, as demonstrated in this demo. However, I encountered an issue when attempting to add new text that should also trigger t ...

javascriptjqueryhtmlcsstooltip

Creating a unique custom bottom position for the popover and ensuring it is fixed while allowing it to expand

Creating a customized popover similar to Bootstrap's popover, I have successfully implemented popovers in all directions except for the top direction. My challenge lies in fixing the popover at the bottom just above the button that triggers it, and en ...

javascripthtmlcss

Adding elements in jQuery can be done by using the `

I am having trouble understanding why my jQuery code is not appending an element to my webpage Below is the code snippet I am using <script> $(document).ready(function() { $(function() { $("#button<?php echo $data[&apos ...

jqueryhtml

Hovering over a white background will darken the CSS styling

A stunning image on a dark background Displayed on Hover (right) An elegant picture with a white background Activated on hover (incorrectly) I would like it to have a darkened effect on the white background as well. CSS Styling .photo background: n ...

css

Adjusting Flex-Basis for various screen sizes

I am perplexed as to why this is not functioning correctly. #parent { display: flex !important; flex-flow: row wrap; width: 100% !important; justify-content: flex-start; } .item{ flex: 1 !important; flex-basis: calc(100% / 4); box-sizing: border-bo ...

htmlcss

What is the best way to prevent 2 divs from overlapping on a webpage?

I'm having trouble getting the smaller div to display right below the larger red div. I tried using the display block css property, but it doesn't seem to be working as expected. Unfortunately, I can't provide an image here, but you can vie ...

htmlcss

Need to style today's date and selected date differently using react datepicker

I am currently working with the React Datepicker and I am facing an issue where two different styles need to be applied for the current date and a selected date. Specifically, I have defined a style for the current date as well as a separate style for whe ...

javascriptcssreactjs

Can different table headers be inserted under a Colspan?

I have been attempting to insert text above each column in Colspan without success. https://i.sstatic.net/MxQPj.png shows the image of how I want the columns in colspan to be displayed as 1 2 3 4 5 O, but I am unsure of how to achieve this. Here is an exam ...

htmlcssbootstrap-4html-table

The material UI Paper component appears to be extending beyond the boundaries of the background image

I have configured the Grid component to occupy 6 on small/medium screens for a side-by-side layout and 12 on xs screens for each item. While everything looks fine in the computer view, I am facing an issue with the mobile view where the paper component is ...

javascripthtmlcssreactjsmaterial-ui

What is the best way to create a "comment posting and replying" section on a website using either PHP or Javascript?

I'm currently in the process of developing my own personal website. I believe that incorporating a section for "user comments and replies" would be a great way to enhance my site. I prefer to avoid user email verification. I'd like users to be a ...

javascriptphpjqueryhtml

What causes certain webpages to experience delays? (Advertisement impact)

Whenever I visit low-quality websites filled with ads, I often experience a delay where part of the site loads and then stalls for seconds before loading the rest. However, when I use AdBlock, the site loads much faster. What exactly is causing this stal ...

javascripthtmlcss

What is the best way to make hover text that also copies when you highlight the main text?

Currently, I am utilizing a basic bootstrap tooltip for creating tables with jQuery. However, I require a specific functionality that the standard bootstrap tooltip does not provide. I need the ability to copy the base text and have it appear as "base tex ...

jqueryhtmlcssbootstrap-4

Tips for preventing changes to the HTML code using the inspect tool

Seeking to prevent recommended videos from appearing when pausing or ending a YouTube video, I resorted to a CSS and JS modification. I successfully placed an image over the video during these events, achieving the desired outcome. However, upon inspectin ...

htmljquerycssyoutubeyoutube-api

Using PHPMailer to send an HTML page via email

I am attempting to email this HTML page using unlayer.com. I have tried using $mail->isHtml(true), ... msgHtml... but the email client keeps showing the code instead of the HTML page. Any suggestions on how to fix this? Here is my code: $sql = "SE ...

phphtmlemailphpmailer

The dropdown menus in Bootstrap are expanding outside the screen when opened

When I click on the dropdown in the Navbar on the right side, the menus open up far to the right and are not visible until I scroll horizontally. Here is the code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

htmlcssangulartwitter-bootstrap

Ensure that the method is passed a negative number -1 instead of the literal number 1 from an HTML error

This is an example of my HTML code: <button (mousedown)="onMouseDown($event, -1)"></button> Here is the TypeScript code for handling the mouse down event: onMouseDown(e: MouseEvent, direction: 1|-1) { this.compute.emit(direction); ...

htmlangulartypescript