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

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.