Change color just of part of select list label HTML

user_10842067 0
Viewed 38

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

enter image description here

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>
css html jquery javascript
1 Answers

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

user_193472060
Related