Day of Year Range Form

by kpowz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form class="container">

<fieldset class="">
  <legend class="row">
  SELECT RANGE
  </legend>
  <div class="row b1">
  <div class="form-group col-xs-2">
   <label class="sr-only" for="month-begin">Month (3-letter abbreviation)</label>
    <div class="input-group">
      <select class="form-control" id="month-begin">
        <option>Jan</option>
        <option>Feb</option>
        <option>Mar</option>
        <option>Apr</option>
        <option>May</option>
        <option>Jun</option>
        <option>Jul</option>
        <option>Aug</option>
        <option>Sep</option>
        <option>Oct</option>
        <option>Nov</option>
        <option>Dec</option>
      </select>
    </div>
    </div>
    <div class="form-group col-xs-2">
    <label class="sr-only" for="day-begin">Day of month</label>
       <div class="input-group">
      <input class="form-control" type="number" id="day-begin" max=31 min=1 step=1 placeholder=1 />      

    </div>
  </div>
  <div class="form-group col-xs-1">
  TO
  </div>
   <div class="form-group col-xs-2">
   <label class="sr-only" for="month-end">Month (3-letter abbreviation)</label>
    <div class="input-group">
      <select class="form-control" id="month-end">
        <option>Jan</option>
        <option>Feb</option>
        <option>Mar</option>
        <option>Apr</option>
        <option>May</option>
        <option>Jun</option>
        <option>Jul</option>
        <option>Aug</option>
        <option>Sep</option>
        <option>Oct</option>
        <option>Nov</option>
        <option>Dec</option>
      </select>

    </div>
    </div>
    <div class="form-group col-xs-2">
      <label class="sr-only" for="day-end">Day of month</label>
      <div 
      class="input-group">
      <input class="form-control" type="number" id="day-end" max=31 min=1 step=1 placeholder=15 />      
    </div>
   
   
  </div>
   <div...

CSS

h2 {
  font-size: 1em;
}
.b1 {
  border: 1px solid #ccc;
  border-radius: 4px;
}
fieldset .form-group {
  margin-top: 15px;
}

span.glyphicon {
  font-size: 2em;
}