Css using wire:target or input type
How can I use css to change colors of actions correctly using wire target or input type . Because I tried to do iT did not worked out for me .
OR
27 Replies
I appreciate if someone could help ty
For a modal action something like this would work.
[wire\:key*="open_curator_picker"]
That wire:key will be on the modal itself.
On your button example I’m not sure what you’re doing with :input why is there a colon in front of it?
fi-btn isn’t an input it’s a button. So the input basically does nothing for targeting the button.but then if you don't specifically target the buttons it changes the color of every button I'm using I just want to change one button color
why not just over ride the modal footer action and set the color there?
but what if you want a different color for dark mode.. if I use extraAttributes that doesn't work for me specially if I try to change color
then
$action->extraAttributes(['class' => 'custom-class']) then target it in your css.
NOT WORKING
Look at the code in the html. Where is your action-color class being applied? If it’s on the same element as .fi-btn then your selector is wrong. In that case it should be .fi-btn.action-color.
Also, your rgba() is missing the alpha value.
alpha value missing .. what does that mean ?
rgba(values, alpha)
If you don’t need the opacity then it would just be rgb(values) or rgba(values, 0.7) for example.
yes but I've already mentioned the hex color on panel
Not a big deal though, rgba() probably defaults to 1 anyway.
yes but I've already mentioned the hex color on panel and still not working
Sorry, you lost me. What is your panel code to define the color. And what is the css you are using to target it?
on panel 'warning' => Color::hex('#fb923c')
Ok. And the css? Also a screen shot of the the html in devtools would help too. I don’t know where the extra attributes are applied on the action.
css
I can’t open that file.
My best guess is that something is off in your css selector. But I’m not sure what it is.
I'm thinking the same but can not find out.. scratching my head since morning 😂
Just look at the output html in devtools. That will tell you how to target it.
That’s why I asked for a screenshot of it. I don’t know off the top of my head how it’s all output.
It is working using !important
sometimes it's necessary
How do I do hover here
like this ?
is .action-color on the actual button?
if so
action color is cutom class
so I tried this but its hovering label bg not full button
I know it’s a custom class but is it on the actual button or not?
You also need to have the :hover on an actual selector. Ie no space before it. That’s why I asked. It’s either .action-color:hover or .action-color button:hover. It matters what element the action-color class is on.