Making a bootstrap input clickable with a font-awesome icon in it

Question

I have a date input field, and a font awesome icon on top of it. The look is correct, but I can't click on the input when the mouse in on top of the icon. I've tried to fix this using z-index, but it's not working.

Here's what it looks like:

HTML

<div class="form-group inline-block Criteria__datePickerDiv">
    <input type="text" name="dob" id="datepicker" placeholder="Birth Date" class="Criteria__datePicker" value=" {{ old($user->seekerProfile->dob->format('Y-m-d')) }}">
</div>
<span class="Criteria__calendar">
    <i class="fa fa-calendar"></i>
</span>

CSS

.Criteria__datePicker {
    border: none;
    border-bottom: 3px solid $gray-light;
    font-size: 20px;
    text-shadow: 0 0 0 $gray-light;
    color: transparent;
    font-weight: 600;
    width: 150px;
    padding-right: 5px;
    margin-left: 15px;

    &:focus {
        outline: none
    }
}
.Criteria__datePicker:hover {
    cursor: pointer;
}
.Criteria__datePicker:focus {
    outline: none;
}
.Criteria__datePickerDiv {
    z-index: 1;
}
.Criteria__calendar {
    position: relative;
    left: -15px;
    font-size: 22px;
    color: $brand_green;
    z-index: 0;
}

Answer 1

Using the default Bootstrap styles, you can get close to what you're doing with an input group ( example ):

HTML:

<div class="buffer">
  <div class="input-group">
    <input class="form-control" aria-describedby="basic-addon2" type="text">
    <span class="input-group-addon" id="basic-addon2">
      <i class="glyphicon glyphicon-calendar"></i>
    </span>
  </div>
</div>

CSS:

.buffer
{
  margin: 1em;
  width: 200px;
}

.buffer .input-group input
{
  border-right: none;
}

.buffer .input-group .input-group-addon
{
  background: #fff;
  border-left: none;
}

If you're going for a borderless style, you can get even closer :

.buffer
{
  margin: 1em;
  width: 200px;
}

.buffer .input-group
{
  border: none;
}

.buffer .input-group input
{
  border-right: none;
  border: none;
  border-bottom: solid 1px #d5d5d5;
  box-shadow: none;
  border-radius: 0;
}

.buffer .input-group .input-group-addon
{
  background: #fff;
  border: none;
  border-bottom: solid 1px #d5d5d5;
  border-radius: 0;
}

.buffer is simply a container/class I added to contain the input group - you can safely remove that.