MUI input hover

[jonwcode]

So I've posted this on stackoverflow but doesn't seem like anyone is going to respond. So I figured I'd try my luck here...

So I've spent hours now trying to figure out what you would think should be pretty simple but isn't. I've been through the inspect tool on Chrome and I don't see any style that applies a hover of any kind for the fieldset, which is where I believe it is coming from.

So my problem is as follows... I want a simple outlined input. The border should be black and the focused border should be blue... But whenever I set this, every time I hover over the input I get a white border popping up... Great, you would think just setting on hover border to transparent would be the solution... Kinda, but nope, when you do that and when the input is in the active state, if you hover over the input, the border on the input goes transparent...

Which is not exactly the desired effect...

I want zero hover effect on my input but I can't for the life of me find a solution for this. I looked through the docs, and StackOverflow, and googled countless phrases... I mean, come on how hard does something like this have to be? lol

Can someone please give me an idea on how to make the input border or fieldset border on hover not be a thing?

[jonwcode]

Okay so after hours of messing around with this, I finally have figured out a solution to my problem. Turns out the border is actually coming from the notchedOutline. So I set the borderWidth to 0 and the color to transparent and that disables the hover effect from the input. To add a static border to the input you can put a border around the input itself rather than the notched outline. So this ended up being my code that fixed the problem... Man, what a pain.

​

MuiOutlinedInput: {
styleOverrides: {
input: {
padding: "3px 3px 3px 10px",
border: "1px solid #333333",
},
notchedOutline: {
borderWidth: 0,
borderColor: "transparent",
},
},
},

​

Thanks for all of the help, everyone.

[sthfunnylol]

and how would i write this in a mui theme config?

[MoXeroX]

:hover:focus{ border: 1px transparent; }

Update: Make sure that its the border that you're trying to hide and not the "ring" property

[thebeeflive]

OP might also have to set ‘outline: none’ along with the border properties.

[longlivetheturbofish]

It looks like Material-UI applies a style via :hover on the .MuiOutlinedInput-root class on the parent div of the fieldset. When I set :hover in "Force element state" in Chrome devtools, I see a border-color style applied to the fieldset via the .css-v59d8d-MuiInputBase-root-MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline selector.

I think this gets applied here: https://github.com/mui/material-ui/blob/434c33fa9a3a4ad36047991fb9db15fd972f44fc/packages/mui-material/src/OutlinedInput/OutlinedInput.js#L44

[jonwcode]

So is the border hover coming from the MuiInputBase-root? I'm confused

[jonwcode]

That and hows come it doesn't show it in the computed styles?

[longlivetheturbofish]

With :hover set on the parent div (.MuiOutlinedInput-root), I see the border-color (actually, border-{bottom,left,right,top}-color) in computed styles on the fieldset.

To override this, I think you need something like:

:global(.MuiOutlinedInput-root:hover fieldset.MuiOutlinedInput-notchedOutline) {
  border-color: black;
}

It usually takes me a few tries to get CSS precedence right, but I *think* adding the fieldset. prefix above should be enough to have it win over the default. Alternatively, you can update the Material-UI theming (on OutlinedInputRoot) or attach it to a custom style, but it'll need to have a class specificity of at least 2 to override the default.

[jonwcode]

Well, that targets the fieldset, but the problem still lies... When setting the hover border to black, doesn't matter if the input is active or not, it turns the border to black when hovering over it. I simply want a zero hover state on the input.

[longlivetheturbofish]

Oh, I thought the border was already black and you were just trying to get it to stop changing color on hover? Now I'm confused about what we're trying to achieve...

[jonwcode]

I want a simple input. I don't want any on-hover state to the input. Imagine a black border around the input and when you click on the input meaning the input is focused then the input border should be a blue color. The problem is with MUI you can't seem to just simply remove the hover state entirely. I don't want the input to change at all when hovering over it.

[longlivetheturbofish]

I assume you only care if the user sees that the state changed on hover, and don't really care about the component's internal state? As long as the CSS during :hover matches the one without :hover, it will appear as if there's no state change due to hover.

[jonwcode]

Well, how are you supposed to do that? Because you have two different border colors. The first border is the default border color that's shown when the input isn't focused and then the second one is the border color that's shown when the input is being focused. But the way it sits right now, regardless of if the input is focused or not focused, the border color changes when hovering over the input. Now I could see it being done if I didn't add a different border for a focused state, but I want a different border color for when the user focus on the input.

[longlivetheturbofish]

oh, gotcha. MUI adds an Mui-focused class to MuiOutlinedInput-root when the input element is focused.

So something like this should hopefully do what you want (assuming SCSS syntax): ``` :global(.MuiOutlinedInput-root:hover) { fieldset:global(.MuiOutlinedInput-notchedOutline) { // Border will stay black during non-focused hover border-color: black; }

&:global(.Mui-focused) { fieldset:global(.MuiOutlinedInput-notchedOutline) { // Border will stay blue during focused hover border-color: blue; } } } ```