bootstrap 4

by praveen_kr

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<div class="container">


<div class='styled-select'>
<select id="exampleSelect1" >
      <option>All Jobs</option>
      <option>Standard Survey Jobs</option>
      </select>

</div>
</div>

CSS

.container {
  margin-top: 20px;
  margin-bottom: 20px;
}
.styled-select
{
  
}

.styled-select select
{
  height:40px;
   border-top: 1px solid #f5f6f6;
   border-right: 1px solid #eeeeee;
   border-bottom: 1px solid #e0e0e0;
   border-left: 1px solid #ebebeb;
   background-color: #ffffff;
   color: #555555;
   font-family:'Arial'
   font-size:13px;
}
.styled-select select:hover
{
   border: 1px solid #bbbbbb;
  background: #f8f8f8 url("../img/jquery-ui/ui-bg_glass_100_f8f8f8_1x400.png") 50% 50% repeat-x;
  font-weight: normal;

}

.styled-select select:focus
{
   -webkit-box-shadow: 0 0 5px 0px rgba(225, 27, 34, 0.5);
  -moz-box-shadow: 0 0 5px 0px rgba(225, 27, 34, 0.5);
  box-shadow: 0 0 5px 0px rgba(225, 27, 34, 0.5);
}