DEV Community

Sufiyan
Sufiyan

Posted on

3 1

Focused state border width hack with Elm-UI

I was recently trying to fix the focused styling for textfields in our company design system (https://github.com/PaackEng/paack-ui), and ran into this issue where I wasn't able to update the border width as per the design for the focused state.

So elm-ui lets you specify attributes for the focused state, but these have the type "decorative" attr (apparently the decorative label has something to do with the ephemeral styles).

Unfortunately, border width property has the type attr. After banging my head for a while I realized a good hack - instead of setting the border width for the focused state, I just ended up setting an explicit shadow:

shadow { color = Colors.navyBlue700, offset = ( 0, 0 ), blur = 0, size = 1.2 }

Works perfectly !!!

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay