How to change border color of an input widget by CSS when mouse hovers on it?

How to change border color of an input widget by CSS when mouse hovers on it?

  

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

Solution

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.

Solution

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:

Just to say that using "!important" is VERY BAD practice...

Hey Eduardo,

I agree with you. so better to use the css selector can solve the problems of "!Important".



Eduardo Jauch wrote:

Just to say that using "!important" is VERY BAD practice...

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,

Carlo


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

Pankaj Pant wrote:

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

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.

Cheers,
Eduardo Jauch


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:

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.

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.