如何在滑块图像上修复Form

Question

我正在开发codeigniter并创建一个网站。 我试图在我的滑块图像上修复用户检查可用性表单，但我没有得到我想要的输出。 这是我的HTML代码：

<form action="index.html" class="default-form">
    <span class="arrival calendar">
        <input type="text" name="arrival" placeholder="Arrival" data-dateformat="m/d/y">
        <i class="fa fa-calendar"></i>
    </span>
    <span class="departure calendar">
        <input type="text" name="departure" placeholder="Departure" data-dateformat="m/d/y">
        <i class="fa fa-calendar"></i>
    </span>
    <span class="adults select-box">
        <select name="adults" data-placeholder="Adults">
            <option>Adults</option>
            <option value="1">1 adult</option>
            <option value="2">2 adults</option>
            <option value="3">3 adults</option>
            <option value="4">4 adults</option>
         </select>
     </span>
     <span class="children select-box">
         <select name="children" data-placeholder="Children">
            <option>Children</option>
            <option value="1">1 children</option>
            <option value="2">2 childrens</option>
            <option value="3">3 childrens</option>
            <option value="4">4 childrens</option>
          </select>
       </span>
       <span class="submit-btn">
           <button class="btn btn-transparent">Book Now</button>
           <a href="#" class="advanced">Advanced Search</a>
       </span>
</form>

这是Css代码：

#banner #hero-tabs .tab-content-list {
  padding: 40px;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
}
#banner #hero-tabs .tab-content-list .tab-content {
  display: none;
}

请帮我解决如何修复图片滑块上的表单。