Hi! Good day devs. i have an input widget and i want to change its border color when mouse hovers on it. i have this CSS snippet:
SyntaxEditor Code Snippet
.clrchnge { border-color: black; border-radius:10px !important; } .clrchnge:hover{border-color: red; }
but nothing happens. Though i have called the clrchnge class on my input widget. what might be wrong, and/or do you have other way of doing it so?
Thank you!
Warm regards,
Carlo
Hi Jan Carlo Duterte,
I have used same code in my application it's working fine. May be your css is overwritten with other css. Try to use " !important" in your code.
.clrchnge { border-color: black; border-radius:10px !important; } .clrchnge:hover{border-color: red !important; }
let me know.
Hi Jan,
The code doesn't have any issue, try to open dev tool and check if the CSS is going to be overwritten by other CSS.
if yes, make the attribute value to !important.
Regards
Pankaj
Thank you Kavita and pankaj!. Problem solved.
Just to say that using "!important" is VERY BAD practice...
Eduardo Jauch wrote:
Hey Eduardo,
I agree with you. so better to use the css selector can solve the problems of "!Important".
Hi sir, what makes the use of "!important" in CSS a bad practice? and if so, is there another way to solve my problem? Thanks.
Reagards,
It mess with the "cascade" of style sheets and usually when you need to change the style you will have to use another !important and so on.
Its usually possible to identify the selector to the style that is being applied and prepare a more specific selector, so that in your particular case, your selector will be used instead of the original.
The best way to find which CSS selector is applying the style is looking in the inspector.
Cheers,Eduardo Jauch
Hey,
Try to create a div before your class. for example class .x and target your class
.x .clrchnge { border-color: black; border-radius:10px } .x .clrchnge:hover{border-color: red; }
now you need not write "!important"
It will only work for the selected one it will not overwrite other styles.
Thanks
Pankaj Pant wrote:
Hello Pankaj,
The input has its own style and border. The better solution is to see which CSS selector is applying the color to the input border and set the correct selector with the :hover to apply the color when hovering.
Yes input has own style but if you apply directly to input it will affect in all over application. so if you want only for specific input try to use diffrent class name.
kavita bagale wrote:
Probably you find a selector that will suit you, without the need to add another class.In any case, if the style must be applied in specific pages, you can set the CSS selector and style in the page, instead of the application theme.
Its a good solution.