Только класс CSS не работает, все остальные CSS работают нормально

Question

В настоящее время я работаю над проектом веб-разработки.

Проблема в том, что все остальные CSS работают нормально, но класс CSS для формы просто не работает. Я понятия не имею, что делать.

.actLeadClaims form { 
 
    margin:40px 25px; 
 
    padding: 10px 20px; 
 
    background: #f4f7f8; 
 
    border-radius: 8px; 
 
    width:465px; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
} 
 

 
.actLeadClaims h1 { 
 
    margin: 0 0 30px 0; 
 
    text-align: center; 
 
} 
 

 
.actLeadClaims input[type="text"], 
 
.actLeadClaims input[type="password"], 
 
.actLeadClaims input[type="date"], 
 
.actLeadClaims input[type="datetime"], 
 
.actLeadClaims input[type="email"], 
 
.actLeadClaims input[type="number"], 
 
.actLeadClaims input[type="search"], 
 
.actLeadClaims input[type="tel"], 
 
.actLeadClaims input[type="time"], 
 
.actLeadClaims input[type="url"], 
 
.actLeadClaims textarea, 
 
.actLeadClaims select { 
 
    background: rgba(255,255,255,0.1); 
 
    border: none; 
 
    font-size: 16px; 
 
    height: auto; 
 
    margin: 0; 
 
    outline: 0; 
 
    padding: 15px; 
 
    width: 400px; 
 
    background-color: #e8eeef; 
 
    color: black; 
 
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset; 
 
    margin-bottom: 30px; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
} 
 

 
.actLeadClaims input[type="radio"], 
 
.actLeadClaims input[type="checkbox"] { 
 
    margin: 0 4px 8px 0; 
 
} 
 

 
.actLeadClaims select { 
 
    padding: 6px; 
 
    height: 32px; 
 
    border-radius: 2px; 
 
} 
 

 
.actLeadClaims button { 
 
    padding: 19px 39px 18px 39px; 
 
    color: #FFF; 
 
    background-color: #4bc970; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    font-style: normal; 
 
    border-radius: 5px; 
 
    width: 100%; 
 
    border: 1px solid #3ac162; 
 
    border-width: 1px 1px 3px; 
 
    box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset; 
 
    margin-bottom: 10px; 
 
} 
 

 
.actLeadClaims fieldset { 
 
    margin-bottom: 30px; 
 
    border: none; 
 
} 
 

 
.actLeadClaims legend { 
 
    font-size: 1.4em; 
 
    margin-bottom: 10px; 
 
} 
 

 
.actLeadClaims label { 
 
    display: block; 
 
    margin-bottom: 8px; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
} 
 

 
.actLeadClaims label.light { 
 
    font-weight: 300; 
 
    display: inline; 
 
} 
 

 
.actLeadClaims .number { 
 
    background-color: #5fcf80; 
 
    color: #fff; 
 
    height: 30px; 
 
    width: 30px; 
 
    display: inline-block; 
 
    font-size: 0.8em; 
 
    margin-right: 4px; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    text-shadow: 0 1px 0 rgba(255,255,255,0.2); 
 
    border-radius: 100%; 
 
}

<div class="actLeadClaims"> 
 
    <form action="" method="post" enctype="multipart/form-data"> 
 
    <fieldset> 
 
     <label>Product Name:</label> 
 
     <input type="text" name="productName"> 
 
     <label>Product Brand:</label> 
 
     <input type="text" name="productBrand"> 
 
     <label>Product Series:</label> 
 
     <input type="text" name="productSeries"> 
 
     <label>Comment:</label> 
 
     <textarea rows="6" name="productDesciption"></textarea> 
 
     <label>Picture:</label> 
 
     <input type="file" name="coverToUpload" id="coverToUpload"></br></br> 
 
    </fieldset> 
 
<input type="submit" value="Add" name="uploadProduct"> 
 
</form> 
 
</div>

Однако все эти кода в конечном итоге выглядеть следующим образом:

Answer 1

Во-первых, вы уже использовали BR теги в неправильном направлении. БР написано <br> или <br /> не </br>.

После этого вы не указали, какова ваша проблема, но я предполагаю, что это касается регулярного размещения меток и создания хорошей формы. Если это так, попробуйте решение ниже. Во-первых, вы исправите теги BR:

<div class="actLeadClaims"> 
    <form action="" method="post" enctype="multipart/form-data"> 
    <fieldset> 
     <label>Product Name:</label> 
     <input type="text" name="productName"> 
     <label>Product Brand:</label> 
     <input type="text" name="productBrand"> 
     <div class="clear"></div> 
     <label>Product Series:</label> 
     <input type="text" name="productSeries"> 
     <label>Comment:</label> 
     <textarea rows="6" name="productDesciption"></textarea> 
     <div class="clear"></div> 
     <label>Picture:</label> 
     <input type="file" name="coverToUpload" id="coverToUpload"><br><br> 
    </fieldset> 
<input type="submit" value="Add" name="uploadProduct"> 
</form> 
</div> 

Затем добавить/изменить CSS Коды так:

.actLeadClaims input[type="radio"], 
.actLeadClaims input[type="checkbox"] { 
    margin: 0 4px 8px 0; 
} 

.actLeadClaims select { 
    padding: 6px; 
    height: 32px; 
    border-radius: 2px; 
} 

.actLeadClaims button { 
    padding: 19px 39px 18px 39px; 
    color: #FFF; 
    background-color: #4bc970; 
    font-size: 18px; 
    text-align: center; 
    font-style: normal; 
    border-radius: 5px; 
    width: 100%; 
    border: 1px solid #3ac162; 
    border-width: 1px 1px 3px; 
    box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset; 
    margin-bottom: 10px; 
} 

.actLeadClaims fieldset { 
    margin-bottom: 30px; 
    border: none; 
} 

.actLeadClaims legend { 
    font-size: 1.4em; 
    margin-bottom: 10px; 
} 

.actLeadClaims label { 
    margin-bottom: 8px; 
    font-family: 'Helvetica Neue', sans-serif; 
} 

.actLeadClaims label.light { 
    font-weight: 300; 
    display: inline; 
} 

.actLeadClaims .number { 
    background-color: #5fcf80; 
    color: #fff; 
    height: 30px; 
    width: 30px; 
    display: inline-block; 
    font-size: 0.8em; 
    margin-right: 4px; 
    line-height: 30px; 
    text-align: center; 
    text-shadow: 0 1px 0 rgba(255,255,255,0.2); 
    border-radius: 100%; 
} 
input, 
textarea { 
    vertical-align: top; 
} 
label { 
    display: inline-block; 
    width: 130px; 
    text-align: right; 
    vertical-align: top; 
} 
.clear { 
    clear: both; 
} 

Посмотрите на форму в jsFiddle. Пожалуйста, разверните выходную часть, чтобы увидеть ее широко.