JSFiddle - React, Tailwind, and code Playground

HTML

<select name="cars" class="select" id="name" autocomplete="off" placeholder="Type of ski" >
        <option value="" disabled selected hidden>Please Select Type Of Skis. . . . . . .</option>
        <option value="0">a</option>
        <option value="1">b</option>
				</select>

CSS

body {
  background-image: url(http://iliketowastemytime.com/sites/default/files/imagecache/blog_image/hd-wallpaper-winter-mountains-scene.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  font: 16px/26px "Raleway", sans-serif;
  text-align: center;
}

li {
  list-style: none;
}
select {
  font: 16px/26px "Raleway", sans-serif;
   background: transparent;
     color: white;
     border: 0;
}

select option {
    margin: 40px;
    color: Red;
	border: 0;
		background-color: transparent;
    background: rgba(0, 0, 0, 0.3);
    -webkit-appearance: none;
}

JavaScript

$(function() {
	var options = $("select option").map(function() {
      return $("<li style='display: none' data-value='" + $(this).attr('value') + "'>" + $(this).text() + "</li>")
  }).get();
  console.log(options);
  var $ul = $("<ul></ul>");
  $ul.append(options)
  $("select").hide().after($ul)
  $("li").first().show().on("click", function() {
  	$(this).siblings().toggle();
  }).siblings().on("click", function() {
      $("select").val($(this).data("value"));
      $("li").first().html($(this).html()).siblings().toggle();
  });
})