How to Style a Select Tag'S Option Element

// Code to convert select to UL$('.select').each(function() {  var $select = $(this).find('select'),    $list = $('<ul />');  $select.find('option').each(function() {    $list.append('<li>' + $(this).text() + '</li>');  });  //Remove the select after the values are taken  $select.after($list).remove();

  //Append Default text to show the selected  $(this).append('<span>select</span>')  var firsttxt = $(this).find('li:first-child').text();  $(this).find('span').text(firsttxt)
  // On click show the UL  $(this).on('click', 'span', function(e) {    e.stopPropagation();    $(this).parent().find('ul').show();  });
  // On select of list select the item  $(this).on('click', 'li', function() {    var gettext = $(this).text();    $(this).parents('.select').find('span').text(gettext);    $(this).parent().fadeOut();  });
})

// On click out hide the UL$(document).on('click', function() {  $('.select ul').fadeOut();});

body {  font-family: 'arial', san-serif;}
.select {  width: 200px;  height: 30px;  border: 1px solid #ddd;  line-height: 30px;  position: relative;  margin-bottom: 40px;}
.select span {  display: block;  color: #333;  font-size: 12px;  padding: 0 10px;}
.select ul {  display: none;  background: #fff;  border: 1px solid #ddd;  min-width: 300px;  position: absolute;  top: 100%;  left: 0;  list-style-type: none;  margin: 0;  padding: 0;  z-index: 10;}
.select ul > li {  font-size: 12px;}
.select ul > li {  color: #333;  display: block;  padding: 2px 8px;  text-decoration: none;  line-height: 24px;}
.select ul > li:hover {  background: #e4f4fa;  cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label>First Select</label><div class="select">      <select>         <option>Item</option>         <option>Item 2</option>         <option>Item 3</option>    </select></div>
<label>Second Select</label><div class="select">    <select>         <option>this 1</option>         <option>this 2</option>         <option>this 3</option>    </select></div>

Style option tag HTML

There is limited styling capability for <option>, as this element is an Operating System element. For better styling of <option> use plugins. For example this plugin (jquery is required). But you can style the selected element in this way - option[selected]. I have provided some examples of how you can style your <option>. Perhaps these are not all possible options.

 #from_currency{ 
   background-color: blue;
   color: green;
 }
 
 #from_currency2{ 
   font-size: 120%;
   width: 100%;
 }
 
 #from_currency3 option[selected]{ 
   background-color: green;
 }

<select id="from_currency" >
    <option value="AED">AED</option>
    <option value="ARS">ARS</option>
    <option value="AUD">AUD</option>
    <option value="BGN">BGN</option>
    <option value="BRL">BRL</option>
</select>

<select id="from_currency2" >
    <option value="AED">AED</option>
    <option value="ARS">ARS</option>
    <option value="AUD">AUD</option>
    <option value="BGN">BGN</option>
    <option value="BRL">BRL</option>
</select>

<select id="from_currency3" >
    <option value="AED">AED</option>
    <option value="ARS">ARS</option>
    <option value="AUD" selected>AUD</option>
    <option value="BGN">BGN</option>
    <option value="BRL">BRL</option>
</select>