JSFiddle - React, Tailwind, and code Playground

by Rhys O'Connor

HTML

<link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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>

CSS

.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;

    
}