change built in CSS attribute

Question

I have a component which I'm inherits (including its css style) and I would like to change one of its attributes

This is the current CSS:

.captcha-main-image {
    width: 100%;
    height: auto;
}

<img class ="captcha-main-image" id="captchaImage" src="">

I would like to change its width value. This element is being generated by a different source and I can't ask the developer to change its value. Any chance I can do that by using !important somehow?

Of course you can do it with !important but you can also do it by using Javascript. The only thing is "When do you want to change the width ?" — Arlien
– Arlien, Commented Feb 12, 2020 at 12:51
Look for thee class the original component is using. And then override that class with !important tags. — Zunaib Imtiaz
– Zunaib Imtiaz, Commented Feb 12, 2020 at 12:53

Wand Maker · Accepted Answer · 2020-02-12 12:52:43Z

1

Because of Angular's view isolation, you can override it only if you put the overrides in application's main style sheet.

In your application's styles.css, which is your application's main scss file - the one that is mentioned in agular.json, add the override:

.captcha-main-image {
   width: <your-value>
}

Typically, the !important is not required. Use it only if required.

answered Feb 12, 2020 at 12:52

Wand Maker

18.8k9 gold badges58 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gokul Sridhar · Accepted Answer · 2020-02-12 12:58:44Z

1

If you want to override class within component adding !important will help Or if you want to override the css outside of that component use ::ng-deep .captcha-main-image can do.

answered Feb 12, 2020 at 12:58

Gokul Sridhar

1318 bronze badges

1 Comment

Jacopo Sciampi Over a year ago

ng-deep is deprecated.

JMP · Accepted Answer · 2020-02-12 13:37:49Z

1

You could add the class with max-width attribute to limit the width, e.g:

.captcha-main-image {
   max-width: 100px;
}

edited Feb 12, 2020 at 13:37

answered Feb 12, 2020 at 12:51

JMP

1,9542 gold badges10 silver badges18 bronze badges

2 Comments

Wand Maker Over a year ago

max-width does not override width, it only puts an upper limit on width's value.

JMP Over a year ago

Yes wording wasn't correct but outcome will have the desired effect, assuming 'width' value set at 100%. Will amend thanks.

Collectives™ on Stack Overflow

change built in CSS attribute

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related