Modify the text color for the placeholder in the textarea

I came across this post discussing how to change the placeholder text color. I've attempted to apply it to my textarea elements.

textarea::-webkit-input-placeholder {
color: #fff;
}

textarea:-moz-placeholder { /* Firefox 18- */
color: #fff;  
}

textarea::-moz-placeholder {  /* Firefox 19+ */
color: #fff;  
}

textarea:-ms-input-placeholder {
color: #fff;  
}

However, it doesn't seem to be working. Can anyone point out what I might be overlooking?

Here is an example of one of my textarea elements:

<textarea
  onChange={(e) => this.props.handleUpdateQuestion(e, firstQuestion.Id)}
  placeholder="Overall Satisfaction Question"
  name="SEO__Question__c"
  type="text"
  className="slds-input"
  value={firstQuestion.SEO__Question__c ? firstQuestion.SEO__Question__c : ''}
  style={inputStyle}
  autoFocus
/>
htmlcss

Answer №1

To style placeholders in modern browsers, you can simply use the ::placeholder pseudo element:

textarea::placeholder {
  color: #0bf;
}

For legacy and modern browsers compatibility:

textarea:-moz-placeholder, /* Firefox 18- */
textarea::-moz-placeholder, /* Firefox 19+ */
textarea:-ms-input-placeholder, /* IE 10+ */
textarea::-webkit-input-placeholder, /* Webkit based */
textarea::placeholder { /* Modern browsers */
  color: #0bf;  
}
<textarea placeholder="test"></textarea>

When including your code, make sure to wrap it in quotes:

onchange="{(e) => this.props.handleUpdateQuestion(e, firstQuestion.Id)}"

Answer №2

It seems to me that using prefixes is not required at this time.

textarea::placeholder {
  color: #fff;  
}

Answer №3

::-webkit-input-placeholder {
       color: orange;
    }
    :-moz-placeholder { /* This is supported in Firefox up to version 18, but deprecated in version 19 */
       color: orange;  
    }
    ::-moz-placeholder {  /* This is supported in Firefox version 19 and above */
       color: orange;  
    }
    :-ms-input-placeholder {  
       color: orange;  
    }

Answer №4

input::placeholder {color: #fff;}

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

What is the best way to display a background image within my div element?

I'm trying to create my first child inside the div.missions, but it's not displaying. The only thing showing is the background color of the second child. Can someone assist me with this issue? Let me share my code with you: Here's my HTML: ...

htmlcss

Struggling to fetch a basic form field input using node.js and express

Currently, I am delving into Node.js with express and web development. For my inaugural project, I aim to craft a directory listing application. In my quest, I stumbled upon a captivating HTML form. Here's a snippet of the form's code: <form a ...

htmlnode.jsexpress

Refresh a specific div element utilizing jQuery

I am facing a challenge with my data table in my Spring MVC project. I want to be able to update or remove data from the table without having to reload the entire page. Below is an example of the HTML div element: <div id="datatable"> </div> ...

javascriptjqueryhtmlajax

What are the steps to create a dynamic navigation bar in React without encountering hydration issues?

My goal is to dynamically show or hide links based on user authorization. Here's my initial approach: const Navbar = () => { const { canDo, ...} = useUser(); //A Zustand store return ( <> <div> <ul> ...

javascripthtmlcssreactjs

What's the reason for the element not inheriting margins from its parent?

I am facing an issue with centering an h1 header within a .banner element. When I try to apply margin to the header, it appears to indent not from the top border of the banner, but rather from the nav element located above the banner. After inspecting the ...

htmlcssmargin

Hide the background when the modal appears

I have successfully implemented a jQuery CustomBox modal on my website. However, I am facing an issue with hiding the content div behind the modal once it pops up. My goal is to make the content div reappear after the modal has been closed. You can view a ...

javascriptjqueryhtmlcssmodal-dialog

Are you attempting to retrieve the most up-to-date trading price of a stock with Python?

After attempting to extract the LTP of a stock with the code below, I am not getting any value in return. Can you identify the error in the following code: from selenium import webdriver from bs4 import BeautifulSoup driver=webdriver.Chrome("C:&bsol ...

pythonhtmlseleniumbeautifulsoupstock

Policy regarding copyright content removal and protection of privacy

In the majority of musical websites I have come across, they often mention the following in their policies: At this particular website (www.Indiamp3.com), you will find links that redirect to audio files. These files are hosted elsewhere on the internet a ...

asp.nethtmlweb-crawlerprivacy

When using JavaScript to dynamically load canvases and create drawing contexts within a function, the context may suddenly disappear

Currently, I am modifying the canvases displayed through ajax calls and also updating what is drawn on each canvas. The primary issue I am facing is that my main drawing function fails on getContext and there are some unusual behaviors such as missing canv ...

javascriptjqueryajaxhtmlcanvas

What is the best API for incorporating interactive maps into my Android application?

I am looking to create an Android app (using Java) with interactive maps similar to ammaps, which can be integrated with HTML5/jQuery Mobile. Check out for reference. The app will display a world map where different areas are highlighted or colored based ...

androidjqueryhtmlgoogle-maps

How can I make my opacity change on hover without the need for JavaScript?

I've been attempting to design a book cover that will become fully visible when hovered over, but for some reason it's not working #book_cover { display: block; margin-left: auto; margin-right: auto; width: 25%; height: 71%; ...

htmlcss

What are the steps to vertically aligning rows in bootstrap?

I've been exploring different solutions to vertically center my rows within the container. Adding d-flex and align-items-center did work for centering them vertically but caused the rows to appear side by side. I'm curious if there's an alte ...

cssreactjsflexboxbootstrap-5

Show a 1920x1170 / 183KB image as the background using CSS styling

I need help with displaying a background image that is 1920x1170 pixels and has a file size of 183KB. Here is the code I am using: .bground{ height:auto; left:0; position:fixed; top:0; width:100%; } <div class="bgrou ...

css

Stop HTML <dialog> from automatically closing using Vue

I'm working on a project where I need to use Vue to programmatically prevent an HTML dialog element from closing when the close event is triggered. Here's the code snippet I am currently using: import {ref} from 'vue'; const dialogTe ...

javascripthtmlvue.jsvuejs3modal-dialog

Problem with IE off-canvas scrolling

Currently, I am facing an issue with the scrolling functionality of an off-canvas sidebar on my Joomla 3 website. It seems to be working fine in Chrome and Firefox, but when it comes to Internet Explorer, the visible scroll bar refuses to move when attempt ...

javascripthtmlcssjoomla

Javascript unable to update the DOM

I've been working on a project to prototype a simple functionality using JavaScript for learning purposes. However, I've encountered an issue where the contents within the <p> tag are not updating, and I'm currently stuck. Here's ...

javascripthtmlajaxdominnerhtml

Switch a div to a computed location

I'm having trouble getting this code to animate a div to a calculated position. Can someone please help me troubleshoot? $(document).ready(function() { var is_Clicked = false; $("#togglebutton").click(function() { if (is_Cli ...

javascriptjqueryhtmlcss

Reduce the size of your CSS files using Gulp through the .pipe method

Is it feasible to incorporate a plugin like clean-css to minify CSS every time a page is refreshed or saved? How can I chain it through pipes to ensure that the minified file ends up in the dist folder? Thank you for any assistance! Presented below is the ...

cssgulpbundling-and-minificationgulp-clean-css

What is causing Safari to block styling for <em> elements in RESET.CSS only?

I am utilizing Eric Meyer's reset.css file, which can be found at this link: Interestingly, my <em> definition in my main stylesheet is working perfectly fine on all browsers except Safari. Somehow, only in Safari, the styling for italics is no ...

cssfontssafarigoogle-webfonts

I am looking to build an array that can store five numbers inputted by the user. Following that, I want to utilize a for loop to display the contents of the array. How can I accomplish this task?

Looking for help to store 5 unknown numbers in an array and then display them after the user has entered all 5 numbers. Can anyone assist me in creating an array of size 5 and using a for loop to show the numbers? Here is the code I currently have: ...

javascripthtmlarrays