Boa noite, estou tentando customizar um form boostrap. O estilo está funcionando em todos os elementos que selecionei, menos no textarea. Por quê? Como posso resolver?
CSS (só a parte que estiliza o form):
#bootstrap-overrides input[type="text"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="submit"]:focus, select:focus, textarea:focus{
border-color:#620062;
box-shadow: 0 1px 1px rgba(130, 38, 130, 1), 0 0 8px rgba(170, 49, 170, 0.51);
outline: 0 none;
}
HTML (só o form):
<div class="row" >
<div class="col-md-4 col-md-offset-4">
<form class="form-group col-xs-12">
<label for="txt-nome">Full Name:</label>
<input type="text" class="form-control" id="txt-nome">
<label for="txt-email">Email:</label>
<input type="email" class="form-control" id="input-email">
<p id="small"><small id="emailHelp" class="form-text text-muted">I'll never share your email with anyone else.</small><br></p>
<label for="phone">Phone:</label>
<input type="tel" class="form-control" id="input-phone">
<label for="input-found">How did you found me?</label>
<select>
<option value="fcc">FeeCodeCamp</option>
<option value="github">GitHub</option>
<option value="linkedin">Linkedin</option>
<option value="facebook">Facebook</option>
<option value="stack">StackOverflow</option>
</select><br>
<label for="input-budget">Budget?</label>
<input type="text" class="form-control" id="input-budget">
<label for="proj-description">Brief description of your project:</label>
<textarea class="form-control" id="proj-description" rows="3"></textarea>
<label for="comments">Comments?</label>
<textarea class="form-control" id="comments" rows="3"></textarea>
<input class="css-submit" type="submit" value="Submit">
</form>
</div>
</div>