1

I use Foundation (without SCSS) as the front-end framework for my web project. When it comes to customization, I prefer not to modify any third-party modules referenced by my project, but use the cascading order rules of CSS to override whatever properties defined in the framework that I want to override. I have a tricky scenario here, however.

Foundation disables the user agent's outline property for for text:focused with text:focused {outline: none !important}. Is there any way, without modifying the framework's CSS, to force the use of the user agent's outline property?

tamakisquare
  • 16,659
  • 26
  • 88
  • 129

1 Answers1

0

You cannot write another CSS rule that would reset the element's styling to default. In most cases, you could define a new rule to set the styling back to most user agent defaults:

text:focused { outline: solid black 1px; }

Unfortunately, you won't be able to override Foundation's !important declaration with CSS. However, you can do so with JavaScript; something like this:

document.theText.style.outline = "solid black 1px";

(I didn't test this, but I could if you provide a JSFiddle demo of your scenario.)

KatieK
  • 13,586
  • 17
  • 76
  • 90