GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Estilo não funciona em <textarea>


#1

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>

#2

resolvi, substitui por uma classe:

#bootstrap-overrides input[type="text"]:focus, input[type="email"]:focus, 
input[type="tel"]:focus, input[type="submit"]:focus, select:focus, textarea:focus, .borda: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;
}