这可能是什么问题？

Question

当我只使用一个覆盖所有fiels的fieldset时，它显示整个表单，当我使用下面给出的时候它只显示上面的fieldset ..下面的一个没有显示。

HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>

<form action ="" method= "post" name= "testform" id="testform" novalidate="novalidate">
    <fieldset>
    <h1 class ="fs-title">Jersey RESTful Web Application!</h1>
    <p class="fs-title"><a href="http://localhost:8081/quickpay/webapi/myresource">Get All Accounts</a></p>
    <h2 class="fs-title">Create your account</h2>
    <input  placeholder="Firstname" type="text" id="firstName" name="firstName" />
    <input  placeholder="MiddleName" type="text" id="middleName" name="middleName" />
    <input  placeholder="LastName" type="text" id="lastName" name="lastName" />

    </fieldset>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female" value="female">
    <label for="female">Female</label>
    <fieldset>      
    <input  placeholder="Address"  type="text" id="address" name="address" />
    <input  placeholder="Pincode"  type="text" id="pincode" name="pincode" />
    <input  placeholder="Phone" type="text" id="phone" name="phone" />
    <input  placeholder="Email" type="text" id="email" name="email" />
    <input  placeholder="Password" type="text" id="password" name="password" />
    <input  placeholder="Confirm Password" type="text" id="cpassword" name="cpassword" />
    <input  placeholder="Balance" type="text" id="balance" name="balance" />
    <input  placeholder="CardId"   type="text"  id="cardId" name="cardId" />
    <input  placeholder="PIN"   type="text"  id="pin" name="pin" />
    <p><input  type ="submit" id="add-account" value="Add user" class ="adduserbutton"></input></p>
    </fieldset>
</form>
</body>
</html>

CSS：

@CHARSET "ISO-8859-1";


body {
font-family: montserrat, arial, verdana;
}
#testform{
    width: auto;
    height: auto;
    margin: 50px auto;
    text-align: center;
    position: relative;
}

#testform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    text-align: center;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;

/*stacking fieldsets above each other*/
    position: absolute;
}
#testform fieldset:not(:first-of-type) {
    display: none;
}

#testform input, #testform textarea {

    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 50%;
    box-sizing: border-box;
    color: #2C3E50;
    font-size: 13px;
}

#testform .adduserbutton {
    width: 100px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}
#testform .adduserbutton:hover, #testform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60,;
}

.fs-title {
    text-align: center;
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}

这可能是什么问题？

更新

工作！ 我在fieldset中设置position：relative：display：block

Answer 1

不确定我是否误解了您的问题，但您将第二个字段集隐藏起来：

#testform fieldset:not(:first-of-type) {
   display: none;
}

因此删除它应该会出现。

Answer 2

这里有问题，

#testform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    text-align: center;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;

/*stacking fieldsets above each other*/
    position: absolute; //<----Here
}
#testform fieldset:not(:first-of-type) {
    display: none; //<----Here
}

即使你设置

#testform fieldset:not(:first-of-type) {
    display: block;
}

它会显示第二个<fieldset>，但position: absolute;秒<fieldset>将首先与<fieldset>重叠，第一个<fieldset>仍然隐藏在后台。

Fiddle

Answer 3

从CSS中删除。

// CSS

#testform fieldset:not(:first-of-type) {
   display: none;
}

注意：您的输入标签也应遵循以下格式：

<input type="radio" name="gender" id="male" value="male">

几乎所有人都有</input>和</>。

两个字段集不能与css一起使用

这可能是什么问题？

更新

3 个答案: