Question

我正在尝试将图像添加到我的电子邮件输入字段并更改一些颜色。对CSS所做的任何更改都不会对我的代码进行任何更改。我的CSS页面也正确链接。我在下面添加的CSS已添加，添加此CSS代码后，将不会进行任何其他更改。任何帮助表示赞赏。

HTML：

<article>
<h3>Information</h3>

<p>
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName">
</p>

<p>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName">
</p>

<p>
<label for="userEmail">Email:</label>
<input type="email" name="userEmail" id="userEmail">
</p>

<p>
<label for="userPassword">Password:</label>
<input type="password" name="userPassword" id="userPassword">
</p>

<h3>Questionair</h3>

<p>
<label for="textInfo">Why do you want to adopt?:</label>
<textarea cols="30" rows="5" id="textInfo"></textarea>
<p>&nbsp;</p>

<fieldset>
    <legend>What type of animal are you looking to adopt?</legend>

   <label><input type="radio" name="dog" value="dog" id="dog">Dog</label>
    <br>

   <label><input type="radio" name="cat" value="cat" id="cat">Cat</label>
<br>

  <label><input type="radio" name="bird" value="bird" 
id="bird">Bird</label>
    <br>
</fieldset>

<p>&nbsp;</p>

<fieldset>
   <legend>Choose a gender?</legend>

   <label><input type="checkbox" name="male" value="male" 
   id="male">Male</label>
   <br>

    <label><input type="checkbox" name="female" value="female" 
  id="female">Female</label>
 <br>

   <label><input type="checkbox" name="either" value="either" 
    id="either">Dosent Matter</label>
    <br>
  </fieldset>
  <p>&nbsp;</p>

   <p>
   <label for="otherPets"> Do you own other pets?</label>
   <select name="otherPets" id="otherPets">
     <option value="hasOtherPets">Yes</option>
     <option value="noOtherPets">No</option>
   </select>
  </p>

   <p>
     <input type="submit" id="submitForm" value="Submit">
   </p>

</article>
</form>

CSS：

添加了输入块并进行了相应的更改，在此之下的代码（从输入[type = submit]开始就是创建代码后CSS停止更改的位置。

input { 
font-size: 120%; 
color: #5a5854; 
background-color: #f2f2f2; 
border: 1px solid #bdbdbd; 
border-radius: 5px; 
padding: 5px 5px 5px 30px; 
background-repeat: no-repeat; 
background-position: 8px 9px; 
display: block; 
margin-bottom: 10px;
} 

input:focus { 
background-color: #ffffff; 
border: 1px solid #b1e1e4;
}

input [type= submit] {
    background-color: #E88940;
    color: #FFEBCD;
}   

input #userEmail { 
background-image: url("../Images/mail.png");
}

Answer 1

这是CSS错误。 input #userEmail不被接受。这种差异会对页面产生巨大影响。即使这是一个很小的错误，也可以通过input#userEmail对其进行纠正。出问题的只是CSS中的一个简单的印刷错误。

编辑：当我在JSFiddle中尝试使用HTML时，我看到一个错误，提示最后是Missing </p>。原来，您开始了一段而从未结束过。

这是正确的HTML和CSS：

input { 
font-size: 120%; 
color: #5a5854; 
background-color: #f2f2f2; 
border: 1px solid #bdbdbd; 
border-radius: 5px; 
padding: 5px 5px 5px 30px; 
background-repeat: no-repeat; 
background-position: 8px 9px; 
display: block; 
margin-bottom: 10px;
} 

input:focus { 
background-color: #ffffff; 
border: 1px solid #b1e1e4;
}

input[type=submit] {
    background-color: #E88940;
    color: #FFEBCD;
}   

input#userEmail { 
background-image: url("../Images/mail.png");
}

<form>
<article>
<h3>Information</h3>

<p>
<label for="firstName">First Name:</label>
<input type="text" name="firstName" id="firstName">
</p>

<p>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" id="lastName">
</p>

<p>
<label for="userEmail">Email:</label>
<input type="email" name="userEmail" id="userEmail">
</p>

<p>
<label for="userPassword">Password:</label>
<input type="password" name="userPassword" id="userPassword">
</p>

<h3>Questionair</h3>

<p>
<label for="textInfo">Why do you want to adopt?:</label>
<textarea cols="30" rows="5" id="textInfo"></textarea>
</p>
<p>&nbsp;</p>

<fieldset>
    <legend>What type of animal are you looking to adopt?</legend>

   <label><input type="radio" name="dog" value="dog" id="dog">Dog</label>
    <br>

   <label><input type="radio" name="cat" value="cat" id="cat">Cat</label>
<br>

  <label><input type="radio" name="bird" value="bird" 
id="bird">Bird</label>
    <br>
</fieldset>

<p>&nbsp;</p>

<fieldset>
   <legend>Choose a gender?</legend>

   <label><input type="checkbox" name="male" value="male" 
   id="male">Male</label>
   <br>

    <label><input type="checkbox" name="female" value="female" 
  id="female">Female</label>
 <br>

   <label><input type="checkbox" name="either" value="either" 
    id="either">Dosent Matter</label>
    <br>
  </fieldset>
  <p>&nbsp;</p>

   <p>
   <label for="otherPets"> Do you own other pets?</label>
   <select name="otherPets" id="otherPets">
     <option value="hasOtherPets">Yes</option>
     <option value="noOtherPets">No</option>
   </select>
  </p>

   <p>
     <input type="submit" id="submitForm" value="Submit">
   </p>

</article>
</form>

Answer 2

这应该可以解决问题。您只需要删除属性选择器和ID之间的空格即可。

input { 
font-size: 120%; 
color: #5a5854; 
background-color: #f2f2f2; 
border: 1px solid #bdbdbd; 
border-radius: 5px; 
padding: 5px 5px 5px 30px; 
background-repeat: no-repeat; 
background-position: 8px 9px; 
display: block; 
margin-bottom: 10px;
} 

input:focus { 
background-color: #ffffff; 
border: 1px solid #b1e1e4;
}

input[type=submit] {
    background-color: #E88940;
    color: #FFEBCD;
}   

input#userEmail { 
background-image: url("../Images/mail.png");
}

表单CSS不会更改

2 个答案: