We Keep Coding

How to add SVG image icon in dropdown list?

I am trying to add some SVG image icons to my dropdown list, I tried a few different approaches but none of them seems to be working.
appt-status option[value="0"] {
background-image: url(../icons/not_confirmed-icon.svg);
}
.appt-status option[value="1"] {
background-image: url(../icons/confirmed-icon.svg);
}
.appt-status option[value="2"] {
background-image: url(../icons/reschedule-icon.svg);
}
.appt-status option[value="3"] {
background-image: url(../icons/pending-icon.svg);
}
<select class="form-control appt-status" data-bind="value: selectedAppointmentStatus">
<option class=" status-list" value="1" style="color: #3EA47B">Confirmed</option>
<option class="status-list" value="2" style="color: #FF0000">Reschedule</option>
<option class="status-list" value="3" style="color: #FFA927">Pending</option>
<option class="status-list" value="0" style="color: #3EA47B">Not opted-in</option>
</select>
With the above code, in inspect window, I can see icons are being loaded but I cannot see them in the dropdown.
Below is the design mockup I would like to achieve
But the result I am getting

you could try to use a pseudo element to add the icons to your status-list class, something like this might work
.status-list:before {
content: url('../icons/reschedule-icon.svg');
}

You can't directly achieve it with the HTML alone. To display the images in the select drop-down we have to use JavaScript libraries or pure JavaScript. you can add an image in select options using the select2 jQuery library.
https://select2.org/dropdow

.fa {
font-family: 'Lato', 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
padding: 1rem 2rem;
color: #3a9c7d;
}
<div class="select-box">
<select name="sample" id="sample" class="fa">
<option value="">----</option>
<option value="fa fa-address-card" class="fa"> address card</option>
<option value="fa fa-bell" class="fa"> bell</option>
<option value="fa fa-bookmark" class="fa"> bookmark</option>
<option value="fa fa-building" class="fa"> building</option>
</select>
</div>
Demo link:- https://codepen.io/mstanka/pen/mdPBdMa

change color when hovering over option

I made a select with javascript and filled its options with an array. Afterwards I wrote some jquery to try and change the backgroundColor of the option when I hover over it, but nothing seems to work. everytime I hover over the options they are still highlighted blue.
I'm new to javascript and jquery and this is an idea that I had of why this happens: could this be because there is a standard hover function in a select that will always override mine or am I really overlooking a mistake? Because I tested my code before on divs and the code worked like a charm here
My code:
//arraycommObjName is an array with 4 elements to fill my selection
//$('#commObjs') is my select
for (i=0; i < arraycommObjName.length; i++) {
$('#commObjs').append($('<option class="testoptions"></option>').attr("value", arrayCommObjID[i]).text(arraycommObjName[i]));
}
$(".testoptions").hover(function(e) {
$(this).css("background-color",e.type === "mouseenter"?"green":"red")
})
take note yes I know it's better to do this with css but it is asked to me to do it with only javascript and jquery.

You can use select2 and add some CSS to override the default styles.
Below is an example with some horrific colors to prove you can override the default select2 white and blue colors.
$("#states").select2();
#states {
width: 300px;
}
.select2-results__option {
color: orange;
background-color: seashell;
}
.select2-results__option--highlighted {
color: white !important;
background-color: darkgreen !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: darkgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="states">
<option value="">Select...</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>

Bold the 1st value in dropdown

I have to make the 1st value in the dropdown text to bold. I tried with ng-class attribute as the UI is developed in angularjs but didn't get success. Now, I am trying with css by making use of first-child selector. I tried with following styles.
1)
select#ad-version-select.form-control : first-child {
font-weight: bold;
}
2)
select#ad-version-select.form-control >: first-child {
font-weight: bold;
}
But the above styles. didn't worked. If I use
select#ad-version-select.form-control {
font-weight: bold;
}
All values in dropdown are becoming bold. How to make only the 1st value in the dropdown to appear bold? I can't use javascript or jquery. Please help me with css.

try this way
select#ad-version-select.form-control option:nth-child(1){
font-weight:bold;
}

You should try like this-
select#ad-version-select.form-control option:first-child {
font-weight: bold;
}
<select name="" id="ad-version-select" class="form-control">
<option value="">option</option>
<option value="">option</option>
<option value="">option</option>
<option value="">option</option>
</select>

select#ad-version-select.form-control option:nth-child(1) {
font-weight: bold;
}
will do the job but it works only in firefox and not in google chrome or in safari.

Actually you can't bold the options.
The only method to highlight or bold is make it an option group
<select>
<optgroup label="Label Group">
<option value="label value 1">Label 1</option>
<option value="Label value 2">Label 2</option>
</optgroup>
<optgroup label="Label Group 2">
<option value="label value 3">Label 3</option>
<option value="label value 4">Label 4</option>
</optgroup>
</select>
You can try here W3Schools

How do i change the color of the buttons html/javascript [duplicate]

How do you set the background color of an item in an HTML list?

select.list1 option.option2
{
background-color: #007700;
}
<select class="list1">
<option value="1">Option 1</option>
<option value="2" class="option2">Option 2</option>
</select>

I assume you mean the <select> input element?
Support for that is pretty new, but FF 3.6, Chrome and IE 8 render this all right:
<select name="select">
<option value="1" style="background-color: blue">Test</option>
<option value="2" style="background-color: green">Test</option>
</select>

I had this problem too. I found setting the appearance to none helped.
.class {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background-color: red;
}

Just like normal background-color: #f0f
You just need a way to target it, eg: <option id="myPinkOption">blah</option>

A Placeholder for the `select` tag?

I'm wondering how to achieve the placeholder effect with the select tag, it would be really nice to have the default selected option something like "Please Chose an Option:".
I have tried some variations and they are not working so far and I'm sure that it can be achieved cause i seen it somewhere (can't remember where).
I have tried this:
1)
<fieldset>
<select data-placeholder="Please select a product" id="s1" class="global">
<option value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
2)
<fieldset>
<select id="s1" class="global">
<option data-placeholder="true" value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
Both are not working, maybe there is a jQuery method to make that?
Quick edit: I DON'T want to just disable one of the options and make it selected because it will still be showed in the drop-down list with the other items.

Here's two types of placeholder, re-selectable and hidden:
Demo: http://jsfiddle.net/lachlan/FuNmc/
Re-selectable placeholder:
<select>
<option value="" selected>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
Hidden placeholder:
<select class="empty">
<option value="" selected disabled>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
CSS to change the colour of the first item:
select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }
And a little jQuery to toggle the font-color after selection:
// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
$(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');
Inspiration:
https://stackoverflow.com/a/5805194/1196148 - re-selectable placeholder
https://stackoverflow.com/a/8442831/1196148 - hidden placeholder

I've built a simple demo by following #Truth suggestion: http://jsfiddle.net/6QnXF/
(function($){
$('#myAwesomeSelect').change(function(){
if( !$(this).data('removedPlaceHolder'))
{
$(this).find('option:first').remove();
$(this).data('removedPlaceHolder', true);
}
});
})(jQuery);
I hope it works for you.

As far as I know, there's no way doing it with HTML alone (though that would be nice.)
You can fake it with a selected option (I know you don't want it, but it's probably the only way). Once another option is selected, you can remove it.
Here's a working example of what I describe.

My guess is that you're going to have to construct your own workaround for a select box. Something like a series of divs that act as options which when clicked are shown and have their value inserted into a hidden input field.