html - 无法在表单中输入文本或单击搜索按钮

Question

知道为什么这段代码停止工作了吗？ (WordPress)

My site - 主要搜索栏“城市”“社区”“最低价格”等没有响应，我无法输入文本，也不知道我做了什么来阻止它。

The code看起来很干净，但当我在 codepen 中输入它时，我网站上的某些东西把它搞砸了!

    <form id="sp_search_w" action="http://www.codytritter.com/listing/" method="get">
        <input name="sp" type="hidden" value="s" /> 
        <label for="sp_city">City</label> 
        <input id="sp_city" class="btn-block" name="sp_city" type="text" placeholder="City" /> 
        <label for="sp_subdivision">Sub Division</label> 
        <input id="sp_subdivision" class="btn-block" name="sp_subdivision" type="text" placeholder="Neighborhood" /> 
        <label for="sp_minprice">Min. Price</label> 
        <input name="sp_minprice" type="text" placeholder="Min Price" /> 

        <!--
        <select name="sp_minprice" id="sp_minprice" class="btn-block">
           <option value="0">No Min</option>
           <option value="25000">25,000</option>
           <option value="50000">50,000</option>
           <option value="75000">75,000</option>
       </select>
       --> 

       <label for="sp_maxprice">Max. Price</label> 
       <input name="sp_maxprice" type="text" placeholder="Max Price" /> 

       <!-- 
       <select name="sp_maxprice" id="sp_maxprice" class="btn-block">
           <option value="50000000">No Max</option>
           <option value="25000">25,000</option>
           <option value="50000">50,000</option>
           <option value="75000">75,000</option>
       </select> 
       --> 

       <label for="sp_bedrooms">Bedrooms</label> 
       <input class="short" name="sp_bedrooms" type="text" placeholder="Beds" /> 
       <!--
       <select name="sp_bedrooms" id="sp_bedrooms" class="input-small btn-block">
           <option value="">All</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4+</option>
       </select> 
       -->

       <label for="sp_bathrooms">Bathroom</label> 
       <input class="short" name="sp_bathrooms" type="text" placeholder="Baths" />

       <!--
       <select name="sp_bathrooms" id="sp_bathrooms" class="input-small btn-block">
           <option value="">All</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4+</option>
       </select>
       -->
       <div class="controls">
            <input id="sp_search_submit" class="btn" type="submit" value="Search" />
       </div>
   </form>

CSS

form { 
   max-width: 100%; 
   margin: auto; 
   text-align: center; 
} 

 input { 
   text-align: center; 
   padding: 1rem 1rem; 
   border-radius: .5rem; 
   border: 2px solid #ddd; 
   font-size: 1.3em; 
   max-width: 8em; 
 } 

 .controls { padding: 1em 0 0; }

 #sp_search_submit { 
   background: #809eb6; 
   border: 0; 
   color: #fff; 
   text-transform: uppercase; 
   letter-spacing: .2rem; 
 } 

 input:focus { outline: 0; } 
 .short { max-width: 4em; } 
 label { display: none; } 

Answer 1

这是一个 CSS 问题。父元素上的 z-index 为 -1。

看到这个风格

.post-489 .et_pb_section:nth-child(1) {
    z-index: -1!important;
}

它是页面头部的引用

<!-- Start CSSHero.org Dynamic CSS & Fonts Loading -->
<link rel="stylesheet" type="text/css" media="all" href="http://www.codytritter.com?wpcss_action=show_css" data-apply-prefixfree />
<!-- End CSSHero.org Dynamic CSS & Fonts Loading -->