Using CSS to customize the dropdown text styling of a select box within a custom wrapper

Question

Using CSS to customize the dropdown text styling of a select box within a custom wrapper

I have a specific customized dropdown menu using the styled-select wrapper:

HTML:

<div class="styled-select">
<select name="example_length" aria-controls="example" class="">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>

CSS:

.styled-select {
      background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 84% 0;
      height: 29px;
      overflow: hidden;
      width: 70px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      background-color: #1abc9c;
      display: inline-block;
      vertical-align: middle;
    }

 .styled-select select {
       background: transparent;
       border: none;
       font-size: 14px;
       color: #000;
       height: 29px;
       padding: 5px; 
       width: 90px;
    }

Link to JsFiddle

I am attempting to change the color of the selected value in the dropdown menu (10 is initially shown as default) to white, while keeping other items in the dropdown dark.

To achieve this effect, I changed the color to white in the select css, but it also made other items in the dropdown white, making them invisible when placed on a white background. If I change the background of the dropdown to a darker color, it overrides the color of the styled select box.

Any assistance would be greatly appreciated!

html css drop-down-menu

Answer 1

Answer №1

To achieve this effect in your CSS, you can include the following code:

option:not(:checked) {
  color: #000;
}

Additionally, update the default color of .styled-select select to color:#fff. This will ensure that unselected options appear with black text while the selected option displays white text.

Learn more about the :not() selector at this link (w3schools)

For further information on the :checked selector, visit this page (w3schools)

I hope this explanation helps!

Answer 2

To achieve this effect in your CSS, you can include the following code:

option:not(:checked) {
  color: #000;
}

Additionally, update the default color of .styled-select select to color:#fff. This will ensure that unselected options appear with black text while the selected option displays white text.

Learn more about the :not() selector at this link (w3schools)

For further information on the :checked selector, visit this page (w3schools)

I hope this explanation helps!

Answer 3

Answer №2

Do you think a solution like this could work for your needs? You might want to consider incorporating some jQuery for added functionality:

<div class="styled-select">
  <select id="source" name="example_length" aria-controls="example">
    <option selected="selected" value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>

Here's an example of using jQuery to style and create a dropdown effect:

    $(document).ready(function() {
   createDropDown();

   $(".dropdown dt a").click(function() {
     $(".dropdown dd ul").toggle();
   });

   $(document).bind('click', function(e) {
     var $clicked = $(e.target);
     if (!$clicked.parents().hasClass("dropdown"))
       $(".dropdown dd ul").hide();
   });

   $(".dropdown dd ul li a").click(function() {
     var text = $(this).html();
     $(".dropdown dt a").html(text);
     $(".dropdown dd ul").hide();

     var source = $("#source");
     source.val($(this).find("span.value").html())
   });
 });

 function createDropDown() {
   var source = $("#source");
   var selected = source.find("option[selected]");
   var options = $("option", source);

   $("body").append('<dl id="target" class="dropdown"></dl>')
   $("#target").append('<dt><a href="#">' + selected.text() +
     '<span class="value">' + selected.val() +
     '</span></a></dt>')
   $("#target").append('<dd><ul></ul></dd>')

   options.each(function() {
     $("#target dd ul").append('<li><a href="#">' +
       $(this).text() + '<span class="value">' +
       $(this).val() + '</span></a></li>');
   });
 }

Take a look at the live demo here: http://jsfiddle.net/kybernaut/bbnso2og/4/

If you're interested in more detailed information and tutorials, check out this resource:

Answer 4

Do you think a solution like this could work for your needs? You might want to consider incorporating some jQuery for added functionality:

<div class="styled-select">
  <select id="source" name="example_length" aria-controls="example">
    <option selected="selected" value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>

Here's an example of using jQuery to style and create a dropdown effect:

    $(document).ready(function() {
   createDropDown();

   $(".dropdown dt a").click(function() {
     $(".dropdown dd ul").toggle();
   });

   $(document).bind('click', function(e) {
     var $clicked = $(e.target);
     if (!$clicked.parents().hasClass("dropdown"))
       $(".dropdown dd ul").hide();
   });

   $(".dropdown dd ul li a").click(function() {
     var text = $(this).html();
     $(".dropdown dt a").html(text);
     $(".dropdown dd ul").hide();

     var source = $("#source");
     source.val($(this).find("span.value").html())
   });
 });

 function createDropDown() {
   var source = $("#source");
   var selected = source.find("option[selected]");
   var options = $("option", source);

   $("body").append('<dl id="target" class="dropdown"></dl>')
   $("#target").append('<dt><a href="#">' + selected.text() +
     '<span class="value">' + selected.val() +
     '</span></a></dt>')
   $("#target").append('<dd><ul></ul></dd>')

   options.each(function() {
     $("#target dd ul").append('<li><a href="#">' +
       $(this).text() + '<span class="value">' +
       $(this).val() + '</span></a></li>');
   });
 }

Take a look at the live demo here: http://jsfiddle.net/kybernaut/bbnso2og/4/

If you're interested in more detailed information and tutorials, check out this resource:

Using CSS to customize the dropdown text styling of a select box within a custom wrapper

Answer №1

Answer №2

Similar questions

Select a random class from an array of classes in JavaScript

How can I add information into a nested div element?

Utilizing Beautifulsoup to extract elements from Selenium

Loading screen for specific content within the current WordPress theme

Tips for instructing Vimeo on the recommended video dimensions for responsive delivery

There seems to be an error with JVectorMap: the <g> attribute transform is expecting a number but is instead receiving "scale(NaN) translate(N..."

The correlation between dynamic pricing and surge pricing in relation to PX

Preserving chosen options in a dropdown menu using PHP and HTML

HTML: Issue with H1 alignment in class

showcasing the picture in the email is consistently

Enhancing the appearance of the active menu item with HTML/CSS/JS/PHP

Send the image link as a parameter

Having trouble bringing in SVG file into my React project

JS Unable to get scrollIntoView function to work with mousewheel event

The show more/show less link for a long jQuery paragraph is malfunctioning

Adding HTML components to an image with adjustable dimensions

What is the best way to store items in localStorage within Angular version 4.4.6?

Activate the initial tab in JQuery UI accordion upon initialization

Incorporating input fields into an HTML form

Adding an image to an HTML page