Создание загрузочного ввода с возможностью использования значка шрифта в нем

Question

У меня есть поле ввода даты и шрифт, который стоит над ним. Правильный вид, но я не могу щелкнуть по вводу, когда мышь находится поверх значка. Я попытался исправить это, используя z-index, но он не работает.

Вот как это выглядит:

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

Использование стилей грузиться по умолчанию, вы можете приблизиться к тому, что вы делаете с группа ввода (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; 
} 

Если вы собираетесь безграничным стиль, вы можете 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 просто контейнер/класс я добавил чтобы содержать группу ввода - вы можете безопасно удалить это.