# Customize Okta Sign in Widget with MFA dropdowns

**URL:** <https://devforum.okta.com/t/customize-okta-sign-in-widget-with-mfa-dropdowns/27754>\
**Category:** Questions\
**Tags:** reactjs, javascript\
**Created:** [April 15, 2024, 8:08pm UTC](https://devforum.okta.com/t/customize-okta-sign-in-widget-with-mfa-dropdowns/27754 "2024-04-15T20:08:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pmd](https://avatars.discourse-cdn.com/v4/letter/p/a88e4f/32.png) [@pmd](https://devforum.okta.com/u/pmd)\
**Post date:** [April 15, 2024, 8:08pm UTC](https://devforum.okta.com/t/customize-okta-sign-in-widget-with-mfa-dropdowns/27754/1 "2024-04-15T20:08:51Z")

</div>

I’ve painstakingly overridden the CSS for the Okta Sign In Widget to work well with our application on a 4K monitor and to make it look like our brand.

I still need to do the dropdowns for MFA selections but it is proving to be much more difficult. Does anyone have a concrete example of attributes to change to change the dropdown list? I understand how to customize the widget because I’ve done a lot of it already.

I had to completely exclude the Okta shipping CSS because it is too difficult to override what’s in there using CSS. Yes, I could have used afterRender, but I ended up tossing out all of the styles anyhow so this made more sense.

If anyone has some CSS that they’re willing to share for the dropdowns, it’d be much appreciated.

---

<div class="post-metadata">

**Author:** ![pmd](https://avatars.discourse-cdn.com/v4/letter/p/a88e4f/32.png) [@pmd](https://devforum.okta.com/u/pmd)\
**Post date:** [April 22, 2024, 7:01pm UTC](https://devforum.okta.com/t/customize-okta-sign-in-widget-with-mfa-dropdowns/27754/2 "2024-04-22T19:01:00Z")

</div>

I abandonded this effort and went to a less customized approach. Using zoom: 175% in my custom .css file made the entire widget zoom in on a 4K monitor and everything scaled pretty well for the most part. I had posted a question earlier about this but came away believing I had to independently resize controls. This isn’t the case. Zoom worked fine, so all I needed to override in my .css (for the most part) was colors and fonts.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/oktadev/original/1X/589c4c5f80de422d01f47cee7185a7fb8227835c.png) [@system](https://devforum.okta.com/u/system)\
**Post date:** [May 22, 2024, 7:01pm UTC](https://devforum.okta.com/t/customize-okta-sign-in-widget-with-mfa-dropdowns/27754/3 "2024-05-22T19:01:11Z")

</div>

Closed on May 22, 2024, 7:01pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.