Forums

Hi,

I 'm using crispy forms to generate Bootstrap forms and I would like to change the border color when selecting form fields. I found this CSS code snipped:

textarea:focus, 
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
 ....
input[type="email"]:focus,
.uneditable-input:focus {   
    border-color: rgba(239, 64, 53, 0.8);
    box-shadow: 0 1px 1px rgba(239, 64, 53, 0.075) inset, 0 0 8px rgba(239, 64, 53, 0.6);
    outline: 0 none;
}

The problem is all input[type="..."] works very well but the textarea and the select fields won't change color

What am I missing?

The most likely issue is that your rules are being overwritten by more specific rules (CSS uses, in part, the specificity of rules to determine which ones to apply). Use the debugger in your browser to inspect the CSS rules that are being applied to the element and you should be able to see that some of them are greyed out because they've been superseded by more specific rules.

ok found the problem. I only had to add

.form-control:focus

rule. Thanks for the hint.