Change color just of part of select list label HTML

Question

I want to make a select list with two different colors in the label, like this :

the number is in blue, and per page in green color

My simple HTML code is :

<select>
 <option value="50">50</option>
 <option value="100">100</option>
 <option value="150">150</option>
 <option value="200">200</option>
</select>

This isn't possible using a standard `select` control. You'll need to use a third party library which renders a `select` as HTML in order to have this level of control over its styling. An example of this would be Select2. — Rory McCrossan, Jul 14 '22 at 15:57
While not currently possible there is some development of a solution using the [`` element](https://open-ui.org/components/select), by the [Open UI](https://open-ui.org/) organisation. — David Thomas, Jul 14 '22 at 16:03

score 0 · Accepted Answer · answered Jul 14 '22 at 17:24

As the others says you would need to use a custom select, here is a very basic example

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
});

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
.init {
  color: blue;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; color: orange;}
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-unstyled">
    <li class="init">[SELECT]</li>
    <li data-value="value 1">Option 1</li>
    <li data-value="value 2">Option 2</li>
    <li data-value="value 3">Option 3</li>
</ul>

I hope this helps

Change color just of part of select list label HTML

1 Answers1