将日历图标放在表单的输入元素中

Question

如何在表单的输入[签入和签出]字段中放置日历图标？

这是我的代码：

      <fieldset class="my-fieldset">
           <legend class="legend-title">Check Available Rooms</legend>
              <ul>
                  <li>
                      <label>Check In</label>
                      <input type="text" id="checkin" class="form-control validate[required] datepicker" name="checkin" value="<?php echo ($_GET?$chkindate:''); ?>" autocomplete="off" required/>
                  </li>
                  <li>
                   <label>Check Out</label>
                       <input type="text" id="checkout" class="form-control validate[required] datepicker" name="checkout" value="<?php echo ($_GET?$checkout:''); ?>" autocomplete="off" required/>
                    </li>
                    <li>
                        <input type="submit" class="medium brown button"  name="submit" value="Check Availability"/>
                    </li>
                </ul>
       </fieldset> 

Answer 1

在输入标签外添加图标，并使用Position Absolute CSS属性将其相应地放置在输入标签内。

Answer 2

我得到了答案。首先，在输入字段后添加一个图标，如下所示：

<li class="my-icon">
     <label>Check In</label>
     <input type="text" id="checkin" class="form-control validate[required] datepicker" name="checkin" value="<?php echo ($_GET?$chkindate:''); ?>" autocomplete="off" required/>
     <span class="fa fa-calendar"></span>
</li>

然后我在my-icon类中添加CSS：

.my-icon span.fa-calendar {
   position: relative;
   right: 0;
   left: 89px;
   display: block;
   bottom: 0;
   z-index: 2;
   top: -24px;
 }

结果：