Skip to main content
Question

Figma plugin orange border in input fild while hover

  • December 29, 2022
  • 2 replies
  • 622 views
laura_edward

Hello all,

I’m building a Figma plugin, but can’t figure out how to do one thing.

In focus mode, I have an input field with an orange border. I tried to fix it with !important, but it didn’t work.

Does anyone know what the problem is?

Add the code for the input and an image to illustrate it.

Thank you!

<input type="text" name="newName" style="background-color: #ffffff; border-color: #0d99ff; border-radius: 2px; border-style: solid; border-width: 2px; color: #000000; font-family: 'Inter', sans-serif; font-size: 11px; line-height: 16px; padding: 0px 5px; height: 32px; width: calc(100% - 8px); margin-left: 4px; margin-right: 4px;
  &:focus {
    all: unset !important;
    border-color: #0D99FF !important;
  }
  &:hover {
    border-color: #0D99FF;
  }
  &:active {
    border-color: #0D99FF;
  }
">

Captura de pantalla 2022-12-29 a las 9.20 1

2 replies

tank666
  • tank666
  • 4863 replies
  • December 29, 2022

Move the styles to the <style> tag, and also remove the ampersand before the pseudo-classes.

:focus {
    outline-style: unset
}
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
laura_edward

Works!

Thank you!

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings