CODEWITHSUNDEEP
htmlcss
Alesfatalis
Alesfatalis

Reputation: 777

form elements in fieldset not useable

i am using some fieldsets in my form. But when i want to use them they are like disabled. You can't click in a textbox and you can't select an option in the selectbox. Here is my code:

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

To demonstrate the effect here it is on JSFiddle. I have built my code based on this: JSFiddle

Can someone say me what i have done wrong?

Upvotes: 1

Views: 95

Answers (1)

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

Remove z-index css Rule from #main and it will work.

Updated Working Fiddle

Read more: What z-index does actually!

Upvotes: 1

Related Questions