Customize Color of Specific Options in MaterializeCSS

I am currently utilizing a select dropdown feature from the MaterializeCSS library. My goal is to implement a specific class that will change the text color of certain options within the dropdown. Is there a method available for accomplishing this?

Upon researching, I discovered that I can adjust the color globally using the following code:

.dropdown-content li>a, .dropdown-content li>span {
    color: red;
}

However, this would result in all dropdown option colors being set to red. Is there a way to define a class that can modify the text color for only select options?

I was hoping to achieve something similar to the example below:

<option value='A'>A</option>
<option value='B' class='red'>B</option>
<option value='C'>C</option>
jquerycssmaterialize

Answer №1

Modifying the behavior of materializecss' javascript components directly from the HTML is not possible, as they are internally rewritten (the select element you see on the page is not the exact one you included in the HTML, as it is actually hidden).

In order to achieve your desired outcome, a simple loop was implemented over the new "option" elements right after initialization. This loop identifies the specific element and then applies the materializecss helper class materialize-red-text to change its appearance.

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, {});
    changeColor();
});

function changeColor(){
  var options_elem = document.querySelectorAll(".dropdown-content li>a, .dropdown-content li>span");
  
  //index==0 corresponds to the disabled option element
  options_elem.forEach(function(element, index){
    if(index == "2") element.classList.add("materialize-red-text"); //you could also use the class "redtext"
  });
}
.redtext {
    color: red !important;
}
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="input-field col s12">
  <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  <label>Materialize Select</label>
</div>

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

How can I deactivate Bootstrap specifically within a certain block of content?

Is there a way to deactivate Bootstrap within a specific section? I want the styles from Bootstrap's CSS file to be overridden inside this div. ...

cssbootstrap-4

AJAX using PHP returns an object containing null values

As a beginner in ajax programming, I encountered a small issue. I created a function in jQuery that makes an ajax call to a PHP file, which then retrieves information about a player from the database. However, when the PHP file responds to the ajax functio ...

javascriptphpjquerymysqlajax

Can you identify the syntax of this LESS variable called @grid-breakpoints with breakpoints for xs at 0, sm at 576px, md at 768px, lg at 992px, and xl at

While exploring the bootstrap less port, I came across this interesting syntax: @grid-breakpoints: xs 0, sm 576px, md 768px, lg 992px, xl 1200px; What exactly is this? It doesn't seem to be a map or an array... How can I retriev ...

cssangularbootstrap-4less

How can you implement a repeating carousel with JavaScript?

I recently came across some carousels on and was intrigued by how they smoothly repeat the slides. Instead of jumping back to the first slide when reaching the end, it seamlessly transitions from the final slide back to the first one. I am eager to learn ...

javascripthtmlcsscarousel

Align text to the left but keep the image centered using Bootstrap 4

Using Bootstrap 4 with a row setup like this: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.combootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anony ...

htmlcsstwitter-bootstrapbootstrap-4

The stylesheet reference, <link rel="stylesheet" href="../css/style.css">, appears to be malfunctioning

My project structure includes css files in a folder named css and jsp files in a folder named jsp, both located inside the WEB-INF folder. I am wondering how to access the css file within a jsp file. <link rel="stylesheet" href="../css/style.css> T ...

htmlcssjsp

Attempting to flip the flow of marquee loop in javascript

I am currently modifying this code to create a left-to-right marquee instead of the original right-to-left one. However, after successfully changing the direction, the text no longer loops as it did originally. I'm stuck and can't seem to figure ...

javascriptjquerymarquee

Issue with displaying and concealing elements in Firefox using jQuery 3.1.0

I have been working on a small radio player project using jQuery. The code can be accessed on codepen. However, I encountered an issue with the code specifically when running it on Firefox (it works fine on other browsers). The problematic part of the Java ...

javascriptjqueryfirefox

Intermittent issues with the jQuery function are causing inconsistencies in

Feeling a bit stuck at the moment. I'm currently using an AJAX live search lookup script to find customers in my database through an input field. Once I select a customer, their details are supposed to populate the form I'm working on. However, ...

javascriptjqueryajax

Efficiently formatting text in a div container

How can I ensure that the text within a span is word-wrapped inside a div? https://i.sstatic.net/W691d.png Here is the code snippet: <div class="col-xs-6 choice btn btn-default" > <span class="pull-left">(Kepala) Bagian Purchasing (not lis ...

csstwitter-bootstrap-3

Getting rid of the border on a material-ui v4 textbox

I am currently using Material-UI version 4 and have not upgraded to the latest mui v5. I have experimented with various solutions, but so far none have been successful. My goal is simply to eliminate or hide the border around the textfield component. < ...

cssreactjsmaterial-ui

The issue with mobile responsiveness is specifically occurring on the Samsung Note 21 and iPhone 14 devices, while functioning properly on all other devices. Attempts to reproduce the error using Chrome dev tools

I'm facing a unique issue at the moment. The landing page I've created is highly responsive on all mobile devices except for the web owner's device: . Interestingly, it appears differently on the web owner's Samsung and iPhone devices:S ...

htmlcss

Aligning msform using CSS

Can someone assist me with centering the form (#msform, #msform fieldset) on all browsers while also keeping the image within the border and ensuring that the form does not extend beyond the right border? JSFiddle #msform { width: 1200px; margin: ...

javascripthtmlcss

Resize Pictures in Carousel for Smartphones

Currently, I am in the process of optimizing my website for mobile devices. The NivoSlider, which is used throughout the site, does not seem to scale well on smaller screens. Despite trying various methods in the mobile section of my stylesheet such as " ...

cssmobilescalinghandheld

I want to combine the Log In and Sign Up pages into a single, efficient page

Currently, I have two separate pages set up. The first page contains a form with fields for email and password: The second page includes all the typical questions for a sign-up process. I am looking to combine both pages into a single page with a split b ...

javascripthtmlasp.netcss

Unable to locate the type definition file for 'jquery'

After updating my NuGet packages, I encountered an issue where I can no longer compile due to an error related to the bootstrap definition file not being able to find the jquery definition file within my project. Prior to the update, the directory structu ...

jquerytwitter-bootstrapvisual-studiotypescriptnuget-package

Is there a way to align the input fields vertically?

Here is the link to my code on jsFiddle input { vertical-align: top; /* Not working */ } I am struggling to align the submit button under the input fields. Can someone provide assistance with this issue? ...

htmlcss

Is there a way to dynamically adjust the overflow-y property based on the height?

Trying to make the overflow-y-visible property visible if the height is too small, otherwise using overflow-y-hidden with tailwind CSS and React. Struggling to achieve this as I can't use sm, md, etc. for height like I can for width. Could someone pl ...

cssreactjstailwind-css

What is the best way to extract the requested URL from an AJAX response?

Within my project, I have incorporated several ajax global events. When using the following code: $(document).ajaxSend(function(event, jqxhr, settings) { // }); I am able to retrieve the requested URL from settings.url. However, I am uncertain abou ...

javascriptjqueryajax

How can we halt the animation on a specific element using jQuery?

Is there a way to unbind an animation applied to a single element, such as div.animate()? I attempted using div.unbind() and div.unbind("animate"), but it did not work... Any suggestions or help would be greatly appreciated. Thank you! ...

jqueryjquery-animateunbind