CODEWITHSUNDEEP
htmlcss
Bxx
Bxx

Reputation: 1625

Input Text CSS Override without !important

How can I override the CSS on the input[type=text] selector without using !important?

input[type=text]{
    background-color: rgb(255, 255, 255);
}

/*This doesn't work */
.bb-input{
    background-color: yellow;
}

Upvotes: 1

Views: 2009

Answers (3)

Code Warrior
Code Warrior

Reputation: 438

inline styling has highest priority so use inline styling 

<input type="text" style="background-color: yellow;">

it will override external if no !important is used

Upvotes: 0

Ibu
Ibu

Reputation: 43810

The first selector is more specific then the second:

CSS Specifity Disclaimer: This is my blog

the class and the attribute have the same weight. The problem is that the first selector input[type="text"] also has the input element, which makes it more specific.

one way you can solve it is by renaming your second selector to

input.bb-input {
   ...
}

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191729

input.bb-input would do. The attribute selector and class selector have the same specifity. The type selector is adding additional specificity to the first selector.

Upvotes: 3

Related Questions