What is the method for changing the placeholder color in a Chosen selection input field?

Within my jQuery v3 / Bootstrap v4.1.2 application, I am utilizing chosen.jquery (Version 1.8.7) and struggling to find the method to modify the placeholder text color in a Chosen selection input using CSS styles such as:

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:    #c2c200 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    #c2c200 !important;
  opacity:  1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    #c2c200 !important;
  opacity:  1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:    ##c2c200 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color:    #c2c200 !important;
}

::placeholder { /* Most modern browsers support this now. */
  color:    ##c2c200 !important;
}

To initialize it, I'm using the following code:

$(".chosen_select_box").chosen({
    disable_search_threshold: 10,
    allow_single_deselect: true,
    no_results_text: "Nothing found!",
});

You can view the issue on this fiddle: http://jsfiddle.net/1Lpdk79r/3/

However, this approach is not working for the chosen input. How can I resolve this?

cssbootstrap-4jquery-chosen

Answer №1

By examining the source code of your fiddle, you'll notice that the Chosen plugin creates a text input based on your select element and inserts the placeholder text as the value for that input. It also applies styling to the input. To customize the styling according to your preferences, you simply need to overwrite the default Chosen styles.

To modify the text color, use the following CSS:

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    color: #c2c200;
}

Check out this link for an updated version of your fiddle showing the changes in action.

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

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

htmlcss

The functionality of Bootstrap's "Button addons" feature appears to be malfunctioning

I've been attempting to create a search bar with the search button enclosed within it. I'm currently following this method (http://getbootstrap.com/components/#input-groups-buttons) and I copied the code exactly as instructed, but unfortunately, ...

htmlcsstwitter-bootstrapclasssearch

Avoiding the occurrence of extra space due to the p tag for paragraphs

I'm currently using the following <p> tag but it's creating a gap between the tick mark and the text that follows after the closing </p> <p class="tick">✓</p> Post messages to friends all over the world. CSS: .tick { ...

htmlcssclassfonts

Enabling graphs to extend to the full height of their parent container

As I construct a Dash layout using flexboxes, I've discovered their utility. However, an issue arises when attempting to adjust the size of charts to perfectly fit within a Dash card since I'm uncertain about the default dimensions of the graphs/ ...

cssflexboxplotly-dash

Implementing a Tri-state Checkbox in AngularJS

I've come across various discussions on implementing a 3-state checkbox with a directive or using CSS tricks (such as setting 'indeterminate=true' which doesn't seem to work). However, I'm curious if there's another method to ...

javascripthtmlcssangularjsweb

Customize CSS on a specific webpage to overwrite the default values set by the

We recently had a website redesigned by a company that also manages and hosts it, along with providing our CRM system. The issue at hand is that they include a backlink in the footer that I am unable to modify since it's not part of the page until the ...

htmlcss

Mobile site experiencing slow scrolling speed

The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...

javascripthtmlcss

Transform Your HTML Into a Stunning Canvas

Help Needed: Despite searching through various questions on Stack Overflow, I have not been able to find a solution to my problem. I am attempting to transform HTML into Canvas using either JavaScript or jQuery. Check out the JsFiddle Demo here .conta ...

csshtmlcanvashtml5-canvas

Jumping pictures using jQuery

I would like to create a bouncing effect for some images on my website. http://jsfiddle.net/d7UjD/43/ $('#bbb').mouseenter(function() { $(this).stop().effect('bounce',500); }); $('#bbb').mouseleave(function() { $(thi ...

jquerycss

What are some creative ways to conceal text using CSS or JavaScript?

Looking for a solution: <div id="body" role="main"> <h1>Title</h1> <p>My site is mysite.com</p></div> I always have <div id="body" role="main">, <h1>, and <p> tags on each page. Is there a way to ...

javascripthtmlcsshide

Vertical words standing alongside an upright line

My goal is to rotate the text without any issues, but I'm having trouble with the line underneath it. The line should adjust its length based on the length of the text. In other words, as the text changes in length, the line should shrink or expand ac ...

htmlcss

Having trouble positioning the Slick Carousel in the middle of the page

Having an issue with centering the Slick Carousel horizontally on my page, can you help? HTML: <!-- logo slider --> <section id="customer-carousel" class="slider responsive container m-5"> <div> <img src=&qu ...

javascriptcssbootstrap-4slick.js

What is the method for making an unordered list float to the right side of the page

I'm running into an issue with a specific element on the tools bar of my website's product page. I am trying to position it so that it floats to the right of the breadcrumb navigation, aligning perfectly inline with it. However, it stubbornly kee ...

htmlcsshtml-lists

show all the elements in a single row

My goal is to have two elements displayed in a single line. I tried implementing what I thought would work perfectly, but unfortunately, it's not quite right. Here's the issue: div#inline{ padding: 0; margin:0; display: inline-bloc ...

htmlcss

Enabling auto-expansion for textareas with every keystroke

Currently, I have implemented the following script: jQuery.each(jQuery('textarea[data-autoresize]'), function() { var offset = this.offsetHeight - this.clientHeight; var resizeTextarea = function(el) { jQuery(el).css('h ...

javascriptjqueryhtmlcssajax

Design that adapts to various screen sizes and devices

I'm facing an issue where the two elements are misaligned on mobile, even though they display perfectly on desktop. In some cases, the bottom element is partially hidden on the left side as shown here: Any suggestions on how to center these elements ...

cssmobileresponsive-design

Can you use "or" or "not" syntax with CSS input type selectors?

In the world of programming, if they actually exist, Suppose I have created an HTML form with the following input fields: <input type="text" /> <input type="password" /> <input type="checkbox" /> I wish to style all input fields that a ...

htmlcsscss-selectors

Beginner guides on creating combo boxes and Facebook-style message composers using CSS and Javascript (or JQuery)

1) Looking to revamp a combo box using CSS and minimal or no javascript. Seeking tutorials that can provide guidance. 2) Facebook users may have noticed the feature where typing in recipients creates a "button" around the user's name. Curious about h ...

javascriptjquerycss

Step-by-step guide to creating a border around text with a number included in between the lines

Is there a way to replicate the appearance of the image shown below using CSS, Bootstrap, or other client-side methods? ...

htmlcssbootstrap-4

What is the best way to modify the color of the btn-primary (label) for an unchecked radio button

Objective: I am aiming to change the background color to #FFFFFF when the radio button is not checked and to #9381FF when it is checked. Current Result: Currently, both buttons display a background color of #9381FF. I am aware that using !important is no ...

javascripthtmlcssbootstrap-5