White border appears when hovering over MUI TextField

I've been troubleshooting this issue for what seems like an eternity. I've combed through Chrome's inspect tool, searching for any hover styles on the fieldset element, but to no avail. Here's my dilemma... I simply want a basic outlined input. A black border with blue focus. However, every time I hover over the input, a pesky white border appears. You'd think setting the hover border to transparent would do the trick, right? Nope. Whenever the input is in the active state and you hover over it, the border turns transparent... not ideal at all. I'm desperate to eliminate this hover effect entirely, but despite scouring documentation, StackOverflow, and countless Google searches, I can't seem to find a solution. How difficult can this be, really? Can anyone provide insight on how to rid the input or fieldset border of its hover effect?

javascriptcssreactjsmaterial-ui

Answer №1

After hours of experimentations, I have finally found a solution to my issue. It turns out that the border is actually coming from the notchedOutline element. By setting the borderWidth to 0 and the color to transparent, I was able to disable the hover effect on the input. To add a static border to the input, I simply placed a border around the input itself instead of the notched outline. Here's the code that solved the problem for me... What a relief!

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminate the unnecessary gap below the image

I have noticed that there is too much space beneath an image on my website. I have tried checking for extra tags, but I suspect that it might be controlled in a css file. Could someone please help me identify which part of the css is causing this extra ...

cssimage

The process of displaying a Login form on the Home page

Is it possible to display the React bootstrap login form on the same home page without redirecting to a new /login page? Basically, I want to disable all current page activities (like clicking and scrolling) when the user clicks on the Login link, and onl ...

reactjsbootstrap-4react-bootstrap

The completion event for Ajax and Json does not activate Google Maps

I'm currently facing an issue with my Google Maps functionality. Despite trying various solutions that involve hidden tabs, the problem persists. The trouble lies in the fact that my ajax function successfully posts and retrieves data, but fails to tr ...

javascriptjqueryajaxjsongoogle-maps

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

Are there any JavaScript event listeners or CSS pseudo classes that can detect when a scrollbar appears and disappears? For example, on Mac OS and Windows Internet Explorer 10 or newer, the scrollbars are hidden by default but appear when scrolling begins. ...

javascripthtmlcssjquery-eventspseudo-class

Guide on capturing JSON objects when the server and client are both running on the same system

I created an HTML page with a form that triggers JavaScript when submitted using the following event handler: onClick = operation(this.form) The JavaScript code is: function operation(x) { //url:"C:\Users\jhamb\Desktop\assignmen ...

javascriptjqueryhtmlajaxjson

What is the process for submitting and storing a collection of files in a database as a list?

I am trying to implement a feature in my MVC project where users can upload multiple files and see them listed before submitting the form. However, I am facing some challenges with finding a solution for this. Demo: My goal is to allow users to add multi ...

javascriptjqueryasp.net-mvc

Extract all links from an external website

I'm attempting to extract all the URLs from a webpage using jQuery so that I can later use them with $.get(). If these URLs were located on the same page as the script, retrieving them would be easy by doing something like var links = document.getEle ...

javascriptjquery

Ways to efficiently group and aggregate data in JavaScript, inspired by LINQ techniques

I'm feeling overwhelmed by this. Could you lend a hand? Consider the following .NET classes: Teacher: public class Teacher { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } publ ...

javascriptarraysjsonlinqgrouping

Transform the JSON response from MongoDB into a formatted string

var db = mongoose.connection; const FoundWarning = db.collection('warning').find({UserID: Warned.user.id, guildID: message.guild.id}).toArray(function(err, results) { console.log(results); }) I have been attempting to ...

javascriptnode.jsmongodbdiscord.js

Sending radio button value via AJAX request

Greetings and thank you for taking the time to hear out my query. I am aware that this question has been asked numerous times before (as informed by SO) but my case is slightly unique. I currently have a functional AJAX script that utilizes a dropdown menu ...

javascriptphpjqueryhtmlajax

Error message: "Context is being utilized outside of the provider - nextjs 13"

Transitioning from nextjs 12 to nextjs 13 has presented some challenges, particularly with the new app/ folder. I encountered an error when attempting to launch the application using the login/ route: Unhandled Runtime Error Error: context used outside of ...

reactjsnext.jsnext.js13

Modify x and y axes in highcharts for stacked columns

Can anyone assist me in finding charts similar to the one shown below? I am interested in utilizing the stacked column charts provided by the highcharts library. However, I need to modify the presentation of the data values as demonstrated in the image. I ...

javascriptjquerygraphchartshighcharts

Leveraging the power of the three.js library on the client-side within a vue.js/n

I'm facing a challenge with incorporating the three.js library (installed via npm) to display 3D models on the client side within my nuxt.js application. Despite multiple attempts, I seem to be hitting a roadblock with the import not functioning prope ...

javascriptvue.jsnpmthree.jsnuxt.js

How can I modify the card loading style in Vuetify?

My preference is for the <v-card :loading="loading">... However, I would like to modify the appearance from a linear progress bar to something like an overlay. I am aware that changing colors can be done by binding color instead of using boolean ...

javascriptvue.jsvuetify.js

managing the focus and blur events within an Angular 1.5 component

While working on an angular js project recently, I encountered a situation involving handling focus and blur events in a textbox. My specific scenario required adding the $ sign when focus is lost from the textbox and removing it when the textbox is focuse ...

javascriptangularjsangularjs-directive

Guess the Number Game with while Loop

I have a project where I need to limit guesses to 10, display the guessed number, and keep those results on the screen after each game without replacing the previous guesses. Each set of guesses should be numbered to show how many guesses have been made us ...

javascript

What is the best way to determine the quantity of elements received from an ajax request?

Here's the method I am currently using to count the number of li elements returned from an AJAX call: $.post('@Url.Action("actionName", "controller")', function (data) { $('#notificationCounter').html($(data).find('li&a ...

javascriptjqueryajax

AngularJS $http.get('') is throwing an error because some parameters are missing

I am currently working on an application that utilizes OAuth for authentication, but I am facing some issues with passing the URL parameters correctly. Despite trying various methods, my API keeps returning an error stating that the username and password a ...

javascriptangularjscordovaoauth

Leveraging NextJS to perform server side rendering by injecting parameters from a caller component

I'm currently in the process of creating an application with a storefront using nextJS. I've successfully utilized getServerSideProps when loading a new page. This particular page is quite complex, as it consists of multiple components, each req ...

javascriptreactjsnext.jsstorefrontreact-redux-form

The curious case of ReactJs/NextJs useEffect(): Unveiling its mysterious double invocation

My custom useEffect() hook is consistently executed twice. It relies on two dependencies: reinitializePage (which triggers the useEffect when set to true) and corporateContext (which updates the component when the context changes). const [reinitializePage, ...

reactjsnext.jsuse-effect