Customize a select dropdown list

Question

I am trying to customize a select element.

The problems I am facing so far is the arrows are not changing as expected and when I click outside the label element nothing is happening.

The first arrow should be there as default, if no hover or click occurs.

Clicking outside should hide the options div and put the first div in a default state.

var arrows = 'iVBORw0KGgoAAAANSUhEUgAAABQAAABLCAYAAABwUacvAAAEw0lEQVRYhe2XLXcbRxSGn+rsmUFjokUTokVr4kUSySIZGSUo/yFl/TdlQWZGDqlRg4ws5JCIdEO6aAWaQXdIC2ZX+2lZcQR6Tvvq6BztfLxzP2bve/XTX3/89jcnRARwZpcnIftWbpidhKmD/wl/HNFw4P7mV4ri6/M7XUWSLcnf/XyY0KYZd9cfePPLJbhqxOMrDcpwd/NIko2v24gwyXLWb9+CK8jWEgbLEgApPRjYupQ0v+Ti6t2IcDKGy3fv2X6Jx2SAlwXbLzH51RvOTHwc4ZkJG8pNNpp7LM/JVq9Jsnxq69NZTrKcsjIIyX7MywJt5iyW02QHCSEk6ON1+3z3+AoT20lXjyJMshybJDxuE7wsAA5a9ywhwHK95v52y/XNV7LV64PWHUV4luRk+RWxTcnWb59bPr6Hk1a+e8+u2B6z9DjCMxNzlh12tcG/v9r8BwkjCPJ3MsJyc38yMoAIpThfr36Y6NuuonzcEGlj9oPi5eWMIjgnRErrluwlfGE7PhR0IlD9Bc3MFJQajw2MiLTqWHeI7KnDBofMqF1uDwyflyJSqiUUhM3dhrIojtpsk4T8KlRwERcI9zGs3bF2zqfb25HQ+6rvyd3tAzZJGCKivw6bWtI8kGVraXXZeCjC4Z85J80vyfKLUXhmTd4FAQmT66sLtg8gZT1XtmSOhKIQltliMunj4uA9RmuW+ZJdmY6mtyQs8wyb2jHbnnAiqTYxFIWnqrKedQAmNiHm3gevRPY5mPXYvK/Zw5i1cz7dObwN1nwqIDZgOq/rEBFCSLS0RA1iq8HEbCtY1LGeJ/P+us5d9+KJwsi33mAXy8xyd3PDA7Ba5wetA5j5fYVxkwvi2BDbkJz0PMWL733bEEnjcmu+F99zoUF+mVL+GY/qyBQi8R6DCkS+sbS/0xhDeq7BCwzeBN9YUIcq8hKy4sUBHukkRw8KR3tq50DfXxOJc4gLgRbpZ3n43JnZ/9L7AhvGZgDaNJNDiw5jan2E91TlDpzHuelMPwXnPFoH90U8eBdiWG6rOsPfRziFCDwaHczXhy/tUYTqBCQ9QpRiV31F6SNu7QEYo4F5EHrlFDZJ0Gb+IjKlAK3ZFVUr9NrMMfPj2t4e6pujlcaV7kRCv7+OKgg9BBk0/uywNc8IvVanFnqtx0I/9Xtyb69LUgiCUnoihvD93cObdf2kxkKPyL57OIR5rNlVQpJ2boaGqNfg1eWq6R62979j6/dbbP9KxTYltpCuXoe9WgE6NO09Yaozub66AFdRleE/3irtx7RwsMyXKDMosE+51HQPZZmgq+D+RWwg8WyKK5aZwSZx8MoIEDw4IPSCsXXhiFdcrDQkHmoFNHG3N2+sFGYt31jojQ7dQ1FI+EdvUz5eN92DCuuby15vj4a6ORT6ffdQOhZGAa7uHjoQAWUA3xF6efodXmaWh/tHbj5sSNIYrfRA6JuICbNJoR9841h1uofFE8dWIBKEvmHX3jAl9NDpHtD9BgmPUg4wiPe10HsHzAH3pNAbo1kk8/GBvj3AiwShhyCDw3I3JfQyaPvCmbWUOte2xFqr0wk9yqCUBqXQx7RYXSjaCDQxVFqBMSjzEuUzaAPavMLLthX63bZk9wK6Fp8B+AebhiZ5WSZDHwAAAABJRU5ErkJggg==';

$('#testSelectDiv').css({
    'font': $('#test').css('font'),
    'width': $('#test').width() - 4,
    'height': $('#test').height(),
    'background': '#ffffeb url(data:image/png;base64,' + arrows + ') no-repeat right 0px'
  })
  .on('blur', function() {
    $(this).css('background-position-y', '0px');
  })
  .on('click', function() {
    $(this).css('background-position-y', $('#testSelectOptions').attr('display') == 'none' ? '-25px' : '-52px');
    $('#testSelectOptions').toggle();
  }).hover(function() {
    $(this).css('background-position-y', '-25px');
  }, function() {
    $(this).css('background-position-y', $(this).css('background-position-y') == '-52px' ? '-52px' : '0px');
  })
  .find('div:first').html($('#test option:selected').text());

$('#testSelectOptions').css({
  'font': $('#test').css('font'),
  'width': $('#test').width() + 4,
  'height': 24 * $('#test option').length + 2,
  'background-color': '#ffffeb'
});

var ul = '<ul style="width:' + ($('#test').width() + 4) + 'px">';

$('#test option').each(function(k, v) {
  ul += '<li selectvalue="' + $(v).val() + '"' + ([0, $('#test option').length - 1].indexOf(k) != -1 ? ' class="' + (k == 0 ? 'first' : 'last') + '-child"' : '') + ($(v).val() == $('#test option:selected').val() ? ' style="font-weight:bold"' : '') + '><a>' + $(v).text() + '</a></li>';
});

ul += '</ul>';

$('#testSelectOptions').html(ul).find('li').on('click', function() {
  $(this).css({
    'font-weight': 'bold'
  }).siblings().css({
    'font-weight': 'normal'
  });
  $('#testSelectDiv div').html($(this).text());
  $('#test').val($(this).attr('selectvalue'));
  $('#testSelectOptions').hide();
  $('#testSelectDiv').css('background-position-y', '-0px');
});

select {
  border: 1px solid #f1deb7;
  padding: 2px;
  background: #ffffeb;
  font: normal 14px Arial, Helvetica, sans-serif;
}

#testSelectDiv {
  display: inline-block;
  border: 1px solid #f1deb7;
  background: #ffffeb;
  padding: 2px;
  padding-left: 6px;
  margin: 0px;
  position: relative;
  top: 7px;
}

#testSelectDiv:hover {
  border: 1px solid #d19c6f;
}

#testSelectDiv div:first-child {
  display: inline-block;
  position: absolute;
  top: 5px;
}

#testSelectOptions {
  display: inline-block;
  border: 1px solid #f1deb7;
  background: #ffffeb;
  position: absolute;
  top: 38px;
  left: 8px;
}

ul {
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0;
  position: absolute;
}

li {
  border-left: 1px solid #cd9e6f;
  border-right: 1px solid #cd9e6f;
  background: #fff7e2;
  cursor: pointer;
  position: static;
  line-height: 24px;
  height: 24px;
  padding-left: 5px;
}

li.first-child {
  border-top: 1px solid #cd9e6f;
}

li.last-child {
  border-bottom: 1px solid #cd9e6f;
}

li:hover {
  background-color: #FAEAC6;
}

<label for="test" style="padding:0px;margin:0px">
    <select id="test" style="display:none">
        <option value="0"> None</option>
        <option value="12"> 12h</option>
        <option value="24" selected="selected"> 24h</option>
        <option value="36"> 36h</option>
        <option value="48"> 48h</option>
        <option value="96"> 96h</option>
    </select>
  
    <div id="testSelectDiv"><div></div></div>
    <div id="testSelectOptions" style="display:none"></div>
</label>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

All the above code is on this Fiddle.