How to modify the color of the placeholder text in a select dropdown using Material-ui

I have a material-ui select component that displays a dropdown menu of options for the user to choose from. The placeholder text, which currently reads "select option," appears in light grey to prompt the user to make a selection. However, I am concerned that this light color may be difficult for individuals with color blindness to read. As a result, I would like to darken the text color, but I am unsure of how to do so without including the placeholder as one of the selectable options within the dropdown menu.

The code for the select component is as follows:

<Select 
  options={options}
  isMulti
  placeholder="Select Options"
  value={this.selectedOptions}
  onChange={this.changeH}
  className=SelectOptionsDropDown
/>

Within the .css file, I have applied the following styling:

.SelectOptionsDropDown {
  text-align: center;
  margin: 10px;
 }

This styling is functioning properly.

javascriptmaterial-ui

Answer №1

Could you give this approach a shot?

<FormControl variant="outlined">
<label htmlFor="age-select">Age</label>
<Select
fullWidth
size="small"
displayEmpty
inputProps={{ 'aria-label': 'select' }}
value={selectedAge}
onChange={handleAgeChange}/>
  <MenuItem value="" disabled>
    <em style={{color:"#9E9E9E"}}>Choose an age</em>
  </MenuItem>
  <MenuItem value={'A'}>Option A</MenuItem>
  <MenuItem value={'B'}>Option B</MenuItem>
  <MenuItem value={'C'}>Option C</MenuItem>
</Select>

Answer №2

To change the placeholder text color, you can utilize the ::placeholder selector as shown in the example below:

.SelectOptionsDropDown::placeholder{
    color: red;
  }

Keep in mind that this feature is not supported in Internet Explorer. You can verify browser compatibility here.

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

Submitting form data using Vue and PHPMailer

I've been encountering an issue with submitting a contact form from a page. After submitting the form, nothing seems to happen. My tech stack includes Vue, Axios, and PHPMailer for handling this functionality. Upon inspecting the network tab, it appea ...

javascriptphpvue.jsphpmailer

Establish a JavaScript hyperlink to assign a value to a shared rendering parameter

In my attempt to create a JavaScript link that, when clicked, assigns a value to a public render parameter in WebSphere Portal, I'm encountering unexpected code instead of the intended value. Here is how I am constructing the link using JavaScript: ...

javascriptwebsphere-portal

Avian-themed masking feature for jCarousel

Currently, I have a series of images in constant motion using jCarousel. Only one image is visible fully at any given time, and I am looking to create a "feathering" effect on the edges of the carousel so that the images smoothly fade in and out as they co ...

javascriptjqueryhtmlcssjcarousel

What is the best way to present a unique page overlay specifically for iPhone users?

When browsing WebMD on a computer, you'll see one page. However, if you access it from an iPhone, not only will you be directed to their mobile page (which is easy enough), but they also display a special overlay with a "click to close" button prompti ...

phpjavascriptiphonehtml

Issue with Angular directive failing to update object within ng-repeat loop

I am working on a directive that is responsible for displaying a tree of folders, including the ability to show subfolders. The directive uses recursion to handle the display of subfolders. <div ng-click="toggleOpen()" class="action"> <span ...

javascriptangularjs

Switchable radio options

Currently, I am creating a form containing multiple options that are mutually exclusive. However, none of these options are mandatory. That is why I want to enable the user to uncheck a selected radio button by simply clicking on it again. This way, all th ...

javascripthtmlpluginsradio-button

Where can I find the previous version of three.js? What is causing the incompatibility between the old and new versions of

Why is my app facing issues with the updated version of three.js? Can I find the previous version of three.js and why isn't the new version compatible? ...

javascriptthree.js

What purpose does the Material UI Box component serve?

I've been struggling to grasp the concept explained here. The Box component functions as a versatile wrapper for various CSS utility needs. What exactly are these CSS utility needs? When should this component be used? What specific problem does it ...

reactjsmaterial-ui

What is the process for obtaining a JSON result after completing an upload?

I recently started working with the razor view engine and I have encountered a situation where I need to upload an image using the Change event of an image browser. The jQuery function for this task is as follows: $("#billUpload").change(function (){ ...

javascriptjqueryjsonasp.net-mvcrazor

Receive JSON data with camel-case in a Web API 2.0 using a model in pascal-case style

My attempt to execute a PUT call on my Web API involves configuring the WebApiConfig.cs file to send data back to my Web project in camel case format. config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesCont ...

javascriptc#jsonajaxasp.net-web-api2

Using Javascript to create bold text within a string

I have noticed that many people are asking about this issue, but it seems like a clear and simple answer is hard to come by. Currently, I am working with Vue and trying to display text from an object in a component. My goal is to highlight the price port ...

javascriptvue.jsecmascript-6vuejs2

What is the best approach for testing the TypeScript code below?

Testing the following code has been requested, although I am not familiar with it. import AWS from 'aws-sdk'; import db from './db'; async function uploadUserInfo(userID: number) { const user = db.findByPk(userID); if(!user) throw ...

javascriptnode.jstypescripttesting

How can I make a div or iframe stretch to fill the remaining space using javascript, jQuery, or css?

I'm looking for a way to make the middle iframe dynamically fill the remaining space between two fixed height iframes (one at the top and one at the bottom) regardless of the window screen size. Is there a technique or method that can achieve this? th ...

javascriptjqueryhtmlcssxhtml

Create a function in JavaScript that can generate a random number a specified number of times based on user input

I have been struggling to develop a JavaScript program that can generate a random number multiple times based on user input. Despite numerous attempts, I haven't been able to get it to work. Below is the code snippet I've been working with: f ...

javascript

Display a particular div when a specific image is present within another div

I'm currently working on a task, but I'm having trouble with it. If I have an image called smiley.png within a div with the class "selected." <div class="selected" style=""><img width="25" height="24" src="images/smileys/smiley.png ...

javascripthtmlcss

The URL provided for the Ajax HTTP request is not accurate

Consider the following JavaScript code: <script type="text/javascript" charset="utf-8> function goForLogin() { var xmlhttp; xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","/account/login",true); xmlhttp.s ...

javascriptajaxsymfony-1.4

What is the process for passing an object in the http.send() method?

I'm currently working on sending a POST request to a specific URL using the code below. However, when passing an object to the http.send(params) function, it's resulting in a (400) bad request error. I'm having trouble pinpointing the issue ...

javascripthttppostvue.js

Changes to the className of a React component will trigger a re-render of

When the className of the parent changes, React children will re-render. import React from 'react'; import { useSelector } from 'react-redux'; import items from './ItemsList.js'; import Item from './Item'; import &ap ...

javascripthtmlreactjsrender

Error encountered: MUI React - syntax error, comma expected

Working on creating a Fixed Bottom Navigation component using Material UI React and encountering an unexpected token error. The error points to as and throws a SyntaxError Unexpected token, expected "," (93:21). What changes should I make? What am I miss ...

reactjsmaterial-ui

Caution: An element is converting an unmanaged input to a managed input. Simple demonstration

When picking an item, a warning message pops up: Warning: The input is being changed from uncontrolled to controlled. This typically occurs when the value changes from undefined to defined, which should not happen. Choose between using a controlled or un ...

reactjsmaterial-uireact-componentcontrolled-component