Form CSS wont change - html

Question

I am trying to add an image to my email input field and change some coloring. Any changes to my CSS won't make a change at all in my code. My CSS page is linked correctly as well. The CSS I added below was added, after adding this CSS code, any other changes won't be made. Any help is appreciated.
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> </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> </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> </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:
the input block was added and changes were made accordingly, the code under that (starting at input [type=submit] is where CSS stopped changing after the code was created.
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

It's the CSS that's wrong. input #userEmail is not accepted. That difference makes a huge effect on the page. Even though it's a tiny mistake, to correct it input#userEmail does what you need. What went wrong was just a simple typographic error in CSS.
EDIT: When I tried your HTML in JSFiddle, I see a error that says Missing </p> at the end. Turns out you started a paragraph and never ended it.
This is the correct HTML and 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> </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> </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> </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

This should do the trick.
You just need to remove the whitespace between your property selector and or 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");
}