Tipo de Select Option

Ola pessoal alguem poderia me dizer de como eu faço para criar um select igual da imagem

	 

	 /monthly_2019_04/15253407_1315611258503877_4071155664433217672_n.png.e13fa871817b013d0cfd837b8329041c.png" /> 

	 

	Eu vi isso em um site estrangeiro e achei top isso para reserva de hotel

	 

	Eu vi o codigo do select deles esta assim

<!-- = reservation form /-->

 <section class="st-row" id="reservation">
 <div class="container">
 <div class="hr-heading rotate">
 <h1>Reservation</h1><small>book your unforgettable pleasure time</small>
 </div>
 <div class="row">
 <!-- ¬ form /-->
 <div class="col-sm-6 col-md-5 col-md-offset-1 col-lg-4 col-lg-offset-2 item-sm">
 <form class="booking-form js-form-booking" action="#" method="POST" autocomplete="off">
 <div class="row row-sm">
 <div class="form-group col-xs-12">
 <label class="label-control">Your name <span class="label-warn">*</span></label>
 <input class="form-control" type="text" name="name" required>
 </div>
 <div class="form-group col-xs-12">
 <label class="label-control">Your e-mail <span class="label-warn">*</span></label>
 <input class="form-control" type="email" name="email" required>
 </div>
 <!-- datepicker/clockpicker *-->
 <div class="form-group col-xs-12">
 <div class="row row-sm input-daterange">
 <div class="col-xs-6">
 <label class="label-control">date from <span class="label-warn">*</span></label>
 <input class="form-control datepicker" data-date-format="mm/dd/yyyy" name="date_from" required>
 </div>
 <div class="col-xs-6">
 <label class="label-control">date to <span class="label-warn">*</span></label>
 <input class="form-control datepicker" data-date-format="mm/dd/yyyy" name="date_to" required>
 </div>
 </div>
 </div>
 <div class="form-group col-xs-12">
 <div class="row row-sm">
 <div class="col-xs-6">
 <label class="label-control">time <span class="label-warn">*</span></label>
 <input class="form-control clockpicker js-input-time" type="text" name="time_from" required>
 </div>
 <div class="col-xs-6">
 <label class="label-control">time <span class="label-warn">*</span></label>
 <input class="form-control clockpicker js-input-time" type="text" name="time_to" required>
 </div>
 </div>
 </div>
 <!-- ¬ number-of-reversed /-->
 <div class="form-group col-xs-12">
 <label class="label-control"># people <span class="label-warn">*</span></label>
 <div class="select-reserved">
 <div class="row row-sm">
 <div class="form-group col col-xs-6">
 <select class="js-select-reserved">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 </select>
 </div>
 <div class="form-group col col-xs-6">
 <input class="select-reserved__check js-reserved-check" id="checkReset" type="checkbox">
 <label for="checkReset"><i class="fa fa-check"></i><span class="span">I have more than 6 people in my party</span></label>
 </div>
 </div>
 </div>
 </div>
 <!-- end number-of-reversed /-->
 <div class="col-xs-12">
 <div class="form-group">
 <label class="label-control">Special requests</label>
 <textarea class="form-control" rows="10" name="message"></textarea>
 </div>
 </div>
 <div class="col-xs-12">
 <div class="booking-form__submit col-auto">
 <button class="btn btn--darker" type="submit">make reservation</button>
 </div>
 </div>
 </div>
 </form>
 </div>
 <!-- end form /-->

	Coloquei ele completo para que possam ver o Formulario completo

	porem preciso apenas fazer da mesma forma no SELECT

 <!-- ¬ number-of-reversed /-->
 <div class="form-group col-xs-12">
 <label class="label-control"># people <span class="label-warn">*</span></label>
 <div class="select-reserved">
 <div class="row row-sm">
 <div class="form-group col col-xs-6">
 <select class="js-select-reserved">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 </select>
 </div>

	Desde já agradeço...