下拉菜单选择生成另一个字段

Question

我不能发布完整的代码，因为它太长了，所以JSFiddle是这里要做的事情：

https://jsfiddle.net/c0ffee/pew9f0oc/1/

具体而言，我的问题是：

https://i.imgur.com/g9zqHGK.png

问题是，当您单击下拉菜单时，您会看到这些选项，但您不能单击它们，它们似乎隐藏在该菜单下面的文本输入后面。

                        <form>
                            <div class="input-field m-b-30">
                                <input type="text" id="firstName" placeholder="First Name" name="name" required="">
                                <label for="fullName">Required</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
                                <label for="phoneNumber">Required</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
                                <label for="phoneNumber">Business Name</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
                                <label for="phoneNumber">Phone Number</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="email" id="emailAddress" placeholder="Email Address" name="email" required="">
                                <label for="emailAddress">Email</label>
                            </div>
                            <div class="input-field m-b-30">
                                <input type="text" id="subject" placeholder="I Would Like To Discuses " name="subject" required="">
                                <label for="subject">Subject</label>
                            </div>
                            <div class="input-field m-b-30">
                                <label for="cars">Choose a car:</label>

                                <select name="cars" id="cars">
                                  <option value="volvo">Volvo</option>
                                  <option value="saab">Saab</option>
                                  <option value="mercedes">Mercedes</option>
                                  <option value="audi">Audi</option>
                                </select>
                            </div>
                            <div class="input-field textarea-field m-b-30">
                                <textarea id="message" placeholder="Message" name="message"></textarea>
                            </div>

                            </div>
                            <div class="input-field">
                                <button type="submit" class="template-btn">Send Message <i class="fas fa-arrow-right"></i></button>
                            </div>
                        </form>

对如何解决这个问题有什么建议吗？

Answer 1

不用在CSS和javascript的泥潭中深入挖掘，您可以通过一些z索引得到一个快速修复，因为是的，样式下拉列表就在它下面的文本区域后面。更改容器以包含此css style='position:relative;z-index:10'。

<div class="input-field m-b-30" style='position:relative;z-index:10'>
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>