Filament•10mo ago

How can change the focus-ring for input

Hey guys, i create a personal theme in my project and need change the size of focus-ring but i can find the right configuration for this line. I have this code actually:

.fi-input {
    @apply focus-visible:!ring-green-300/80 dark:focus-visible:!ring-green-300/30;
}

.fi-input {
    @apply focus-visible:!ring-green-300/80 dark:focus-visible:!ring-green-300/30;
}

i want change the size of focus-ring and color, how can do this? Thank you!

34 Replies

TranceCodeOP•10mo ago

Dennis Koch•10mo ago

If you check your screenshot you see, that it needs to be added to .fi-input.wrap

TranceCodeOP•10mo ago

i try with this code, but is not working

.fi-input.wrap {
        @apply focus-visible:!ring-indigo-500 dark:focus-visible:!ring-indigo-800;
    }

.fi-input.wrap {
        @apply focus-visible:!ring-indigo-500 dark:focus-visible:!ring-indigo-800;
    }

Dennis Koch•10mo ago

Yeah. Check your screenshot again. I added 2 typos, but the class is right there in your screenshot

TranceCodeOP•10mo ago

i update this:

.fi-input-wrap .fi-input {
        @apply focus-visible:!ring-indigo-300/80 dark:focus-visible:!ring-indigo-300/30;
    }

.fi-input-wrap .fi-input {
        @apply focus-visible:!ring-indigo-300/80 dark:focus-visible:!ring-indigo-300/30;
    }

But is not working, sorry for my basic problem bro!

Dennis Koch•10mo ago

The class is called fi-input-wrp. There is no a in wrap Probably a typo, so maybe add both to avoid future breaking changes

phydeaux•10mo ago

Did you ever get this working? I've tried all sorts of variations and I can't get the focus ring to show up when I click or tab into a field.

TranceCodeOP•10mo ago

No way worked for me, @phydeaux @Dennis Koch I did several tests but nothing, in my case I want to either hide it or reduce the size, the thickness or width of the focus ring line is too much...

phydeaux•10mo ago

And I can't get it to show up at all. I'm using a FormBuilder element in a standard Livewire component but I can't imagine that would make any difference.

awcodes•10mo ago

‘focus-within’ is setting it to ring-2. You need to target that. Not ‘focus-visible’ Looks like you are also targeting ‘.fi-input’ instead of ‘.fi-input-wrp’ which is where the focus state is handled.

TranceCodeOP•10mo ago

Thank you so much for this information @awcodes it's working really good for me! i update my code like this @phydeaux

.fi-input-wrp {
   @apply focus-within:!ring-green-500 dark:focus-within:!ring-green-500;
   @apply focus-within:!ring-1 dark:focus-within:!ring-1;
}

.fi-input-wrp {
   @apply focus-within:!ring-green-500 dark:focus-within:!ring-green-500;
   @apply focus-within:!ring-1 dark:focus-within:!ring-1;
}

awcodes•10mo ago

You can also combine those into one apply rule. 😃

TranceCodeOP•10mo ago

like this?

.fi-input-wrp {
        @apply focus-within:!ring-indigo-500 dark:focus-within:!ring-indigo-500 focus-within:!ring-1             dark:focus-within:!ring-1;
    }

.fi-input-wrp {
        @apply focus-within:!ring-indigo-500 dark:focus-within:!ring-indigo-500 focus-within:!ring-1             dark:focus-within:!ring-1;
    }

awcodes•10mo ago

Yep.

TranceCodeOP•10mo ago

super cool, thank you bro! thank so much for your time!

awcodes•10mo ago

No problem. Thanks for giving Filament a go.

TranceCodeOP•10mo ago

I owe you a beer! It's the first project with Filament... I go for a second in a few weeks... Using the Filament with FrankenPHP

awcodes•10mo ago

Nice. Hoping to get more into FrankenPhp soon.

TranceCodeOP•10mo ago

and I may go for the third, all like startup of course...

awcodes•10mo ago

I’m converting 20+ projects to filament at the moment. 😅😂 Finally getting rid of Wordpress. Feels liberating.

TranceCodeOP•10mo ago

In fact, in development I have it mounted in a docker and it runs fast like F1, just install it, I didn't have to configure anything in particular other than installing Laravel Octane... 🙌

awcodes•10mo ago

Sounds cool.

TranceCodeOP•10mo ago

super cool... i make site with wordpress a few years ago, but now with Laravel and more now with Filament, all is really amazing, we can make all with personalization and the webapp work more fast if we have 170 request per second with wordpress and woocomerce, now with laravel we have 1000 or more request p/s

awcodes•10mo ago

💯 feel like I spend more time fighting WP than using it. Also don’t like being locked into react with all the recent updates and changes.

TranceCodeOP•10mo ago

i hate react bro hahaha i love NuxtJS or VueJS, more easy, more structured and more funny or I think I misunderstood the word react i think in the library

awcodes•10mo ago

You’re not wrong.

TranceCodeOP•10mo ago

but yes, the update of wordpress and plugins is other problem

awcodes•10mo ago

The Gutenberg editor is all React And all of the block data is stored in the db as html comments. Is so gross. 🤮

TranceCodeOP•10mo ago

yeah, that is really bad, a bad idea too for performance

awcodes•10mo ago

No doubt.

phydeaux•10mo ago

Thanks! That worked for me too. I'm so not a front-end guy 🙂

TranceCodeOP•10mo ago

Super cool bro...

gary•10mo ago

Came here to see if anyone was using Filament with frankenphp yet. 🙂

TranceCodeOP•10mo ago

I will do this in a few week... i will put one of my project in dev from docker to DigitalOcean...

Gaming

Programming

How can change the focus-ring for input