Material UI removing hover styles for inputs

Question

On the Material UI Text Inputs, there is a black border that appears when hovering over any input field. It honestly looks awful. How can I get rid of it?

I have this CSS content:

& .MuiOutlinedInput-root {
    &.Mui-focused fieldset {
        border-color: green;
    }
    &:hover fieldset {
        border: none;
    }
}

which technically works, but now on hover it just removes to border entirely.

I've tried changing the none to inherit or initial, transparent, etc., but that also fails epically.

Will setting `border-color: transparent` on hover works? or Can you create a small working snippet? — Sai Manoj, Jun 27 '23 at 16:29
The `border-color` on hovering the input is already set as `border-color: rgba(0, 0, 0, 0.87)`. You need to overwrite this to `border-color: rgba(0, 0, 0, 0.23)` which is the initial color. — Srishti Gupta, Jun 27 '23 at 16:32
@SaiManoj then when hovering and it is active the border disappears entirely. I don't want the border to go away, just not do any hovering — zazvorniki, Jun 27 '23 at 16:34
@SrishtiGupta, but then the hover would still be active. When active and has the green color if you hover over it you see the default styles. I really need to just turn off the hovering all together — zazvorniki, Jun 27 '23 at 16:35
@zazvorniki It would be good to share a working link for the existing code and the actual expectation is also not clear from the question. — Srishti Gupta, Jun 27 '23 at 16:51
@SrishtiGupta I would like to remove the hovering styles so when you hover nothing happens — zazvorniki, Jun 27 '23 at 16:54

score 0 · Answer 1 · edited Jul 10 '23 at 17:52

0

The feasible solution would be using the original border color as hover.

  "& .MuiOutlinedInput-root": {
    "& fieldset": {
      borderColor: "#E0E3E7" // this is the original border color
    },
    "&:hover fieldset": {
      borderColor: "#E0E3E7" // use the original border color on hover
    },

here is a working codesandbox

edited Jul 10 '23 at 17:52

Harrison

1,654
6
11
19

answered Jul 07 '23 at 07:49

shanta mazumder

1

score -2 · Answer 2 · answered Jun 27 '23 at 16:40

-2

To remove the black border entirely when hovering over Material UI Text Inputs, you can override the default hover style of the fieldset element. Instead of setting the border property to none, you can use border-color: transparent to make the border invisible while maintaining its presence.

Here's an updated version of your CSS code:

& .MuiOutlinedInput-root {
  &.Mui-focused fieldset {
    border-color: green;
  }
  &:hover fieldset {
    border-color: transparent; /* Change 'none' to 'transparent' */
  }
}

By setting border-color to transparent, the border will still be present but won't be visible, effectively removing the black border while hovering.

Make sure to check if there are any other CSS rules that may override this style. If the issue persists, you can inspect the element using your browser's developer tools to see if there are conflicting styles or if the CSS class names have changed in the version of Material UI you are using.

answered Jun 27 '23 at 16:40

VAHAB

1

This technically works, but it does not. I want to remove the hovering effect, so when you hover over it nothing happens. If you do the above code when you hover over the field the border is removed entirely. I don't want the border to go away, just not have the awful hover effect – zazvorniki Jun 27 '23 at 16:47
The ONLY styles on this input field is the above and the default material UI styles. – zazvorniki Jun 27 '23 at 16:48
2

This is more AI-generated output masquerading as the owner's own words. ChatGPT is banned on Stack Overflow. – tchrist Jun 27 '23 at 17:52
Nice catch @tchrist! https://imgur.com/a/JMQvIu6 – Steve Jun 27 '23 at 19:16
1

@SteveGomez [More where that came from](https://stackoverflow.com/a/76567957/471272). This is just some robot. – tchrist Jun 27 '23 at 19:23
Welcome to Stack Overflow! All of your three answers here appear likely to have been entirely or partially written by AI (e.g., ChatGPT). Please be aware that [posting AI-generated content is not allowed here](//meta.stackoverflow.com/q/421831). If you used an AI tool to assist with any answer, I would encourage you to delete it. We do hope you'll stick around and become a valuable part of our community by posting *your own* quality content. Thanks! – NotTheDr01ds Jul 03 '23 at 19:33
**Readers should review this answer carefully and critically, as AI-generated information often contains fundamental errors and misinformation.** If you observe quality issues and/or have reason to believe that this answer was generated by AI, please leave feedback accordingly. The moderation team can use your help to identify quality issues. – NotTheDr01ds Jul 03 '23 at 19:34

Material UI removing hover styles for inputs

2 Answers2