michltm michltm - 17 days ago 9
CSS Question

font awesome icon in select option

I try to add a caret down icon to the first selection of several options as shown on the picture below:

enter image description here

here is a Fiddle with my example: https://jsfiddle.net/wwut6apr/30/

I can't get the icon to be visible on the Fiddle above.

And the corresponding code:



.wrapper{
height:200px;
background-color:red;
padding-top:100px;
padding-left:150px;
}

#before-select{
font-size:30px;
color:#ffffff;
}

select {
border: none;
background: transparent;
/*background-color: blue;*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 180px;
padding-top: 0px;
background-size: 20px;
color:#ffffff;
font-size:30px;
}


select option {
color:#424146;
background:#ffffff;


}

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<div class="wrapper">

<form role="form">
<span id="before-select">in</span>

<select name="town">
<option value="London">London <i class="fa fa-caret-down" aria-hidden="true"></i>
</option>
<option value="Paris">Paris</option>
<option value="Madrid">Madrid</option>
</select>


</form>


</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>




Answer

You can't add i tag in option tag because tags are stripped.

But you can add it after the select like this

Comments