0

I am adding some style to a webpage, but I am having a problem, I added a rule, and chrome developer tools say that is computed, but it is not applied. What this mean?

Google developer tool

Matías González
  • 1,366
  • 3
  • 15
  • 30

2 Answers2

0

I'm not sure if this is always the case, but I think this generally means that its been overridden by another rule with a higher degree of specificity.

CSS rules are graded in terms of how specific they are to an element, and when rules clash, then the most specific will be given precedence. You can address this by adding a class directly to the element, or by making your rule stricter (more specific).

Steve Land
  • 4,852
  • 2
  • 17
  • 36
  • Mmmm I don't think that this could be the problem, I just added style="border-radius=0px !important" directly in the element, and the same happend. Google chrome dev show that the better rule is element.style but it stills giving the same style. – Matías González Jul 10 '17 at 22:05
  • what happens if you set style="border-bottom-left-radius=0px !important" ? – Steve Land Jul 10 '17 at 22:07
  • If the property is being modified by a CSS with `animation` property, it can override the `!important` declaration. – Dez Jul 10 '17 at 22:08
  • 1
    Thanks for the comments, if I add `border-bottom-left-radius=0px !important` the same happend, and I don't have css with animations, but I found the solution adding `-webkit-appearance: none` as says in this question https://stackoverflow.com/questions/24210132/remove-border-radius-from-select-tag-in-bootstrap-3 – Matías González Jul 10 '17 at 22:18
0

In my case I solved the problem adding -webkit-appearance: none. Apparently google dev tools don't show webkit appearance but apply that.

Matías González
  • 1,366
  • 3
  • 15
  • 30