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

时间:2019-01-02 05:28:05

标签: css html5 input icons

如何在表单的输入[签入和签出]字段中放置日历图标? enter image description here

这是我的代码:

      <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> 

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

<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;
 }

结果: enter image description here