Change background and color input password in bootstrap 3

Asked

Viewed 184 times

1

I customized all the website input fields by passing new values to the Bootstrap 3 classes by changing the input[type='password'] Bootstrap 3 style sheet (loose sheet after loading of BS3 css), the same does not change, all other inputs, selects, textarea, yes:

.form-control, 
.form-control:focus, 
#contact-form input, 
#contact-form textarea, 
#contact-form select, 
form#formUpdate input, 
form#formUpdate textarea, 
form#formUpdate select, 
form#formUpdateContato input, 
form#formUpdateContato textarea, 
form#formUpdateContato select, 
form input, form textarea, 
form select, 
.header-search form input, 
.header-search form select, 
.header-search form select option, 
.listComments .listCommentsQuestion, 
textarea, 
input, 
select, 
select option, 
form password, 
password {
        background-color: #6A6969;
        color: #FFFFFF;
    }
css twitter-bootstrap

  • @hugocsl is not Chrome autocomplete, it does not apply to this, as I already dealt with this problem with Chrome at the beginning of the project with some Libraries, the problem is specific. Please read the whole question before marking as duplicate.

  • I thought you were talking about the yellow or blue background that Browser puts by default in Password and Email fields... was bad... however I left an answer there I think will solve the problem

2 answers

1


Your problem is probably because of this

...
form password, 
password {
    background-color: #6A6969;
    color: #FFFFFF;
}

The attribute password At least not that way, so you didn’t get the style! It should be something like 

[type="password" ] {
    background-color: #6A6969;
    color: #FFFFFF;
}

That would work

.form-control, 
.form-control:focus, 
#contact-form input, 
#contact-form textarea, 
#contact-form select, 
form#formUpdate input, 
form#formUpdate textarea, 
form#formUpdate select, 
form#formUpdateContato input, 
form#formUpdateContato textarea, 
form#formUpdateContato select, 
form input, form textarea, 
form select, 
.header-search form input, 
.header-search form select, 
.header-search form select option, 
.listComments .listCommentsQuestion, 
textarea, 
input, 
select, 
select option, 
form [type="password" ] {
        background-color: #6A6969;
        color: #FFFFFF;
    }

 
<input type="password" name="" id="">

  • 1

    Yes it did. Thank you for that.

  • @Eliseub. No problem at all

1

Make sure when you put "!Port" it works. It may be that the element is related to country elements and you have to mount the tree following the parent to the child element, ex:

Body>. parent>. child>. element{ CSS here }

Or

.element { CSS: css! Port; }

  • It wasn’t. I hardly create with other dependencies. It must be plugin css. Vlw

  • I don’t even mean other dependencies, it would be more by the hierarchy of css itself. I usually have problems of these two types other could be the position of the css in the scope, it may be that some css is overlapping yours by being positioned below yours, and so it is rendered after yours and has predominance. I suggest checking and putting your css as the last element in your <head>

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.