Question

我在表格中使用了一些字段集。但是，当我想使用它们时，它们就像残疾人一样。您无法在文本框中单击，也无法在选择框中选择一个选项。这是我的代码：

HTML：

<fieldset>
<legend>Group 1</legend>

<div><input type="text" /></div>
<div>

    <select>
        <option>Option 1</option>
    </select>
</div>
</fieldset>
<fieldset>
<legend>Group 1</legend>

<div><input type="text" /></div>
<div>

    <select>
        <option>Option 1</option>
    </select>
</div>
</fieldset>

CSS：

#main {
    position: relative;
    border: 1px solid #c3c3c3;
    box-shadow:
        0 0 0 1px #d8d8d8;
    min-width: 300px;
    min-height: 500px;
    max-height: 500px;
    max-width: 300px;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    z-index:-1;
    margin-left: 40%;
    margin-right: 40%;
    padding-top: 70px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}
FIELDSET {
    margin: 8px;
    border: 1px solid silver;
    padding: 8px;
    border-radius: 4px;
}
LEGEND{
    padding: 2px;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:normal;
    line-height:1;
    color:#999;
}

为了证明这里的效果，它在JSFiddle上。我基于此构建了我的代码：JSFiddle

有人能说我做错了吗？

Answer 1

从z-index移除#main css规则，它将有效。

Updated Working Fiddle

Read more: What z-index does actually!

fieldset中的表单元素不可用

1 个答案: