how to remove border in textfield fieldset in material ui

user_7857369 0
Viewed 33139

I need to remove the border. I used some css from stack overflow but the issue is not fixed yet . If any one please help me to fixed this issue .I shall be very thank full.

what css I write to remove the border.

enter image description here

<TextField
  variant="outlined"
  margin="normal"
  required
  fullWidth
  id="phoneNumber"
  disableUnderline={false}
  // label="Phone Number"
  name="phoneNumber"
  autoComplete="phoneNumber"
  autoFocus

  onChange={handlePhoneNumberChange}
  className={classes.textField}
  placeholder="Phone Number"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <AccountCircle />
      </InputAdornment>
    ),
  }}
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>

material-ui reactjs css
11 Answers

I was looking for a borderless text-field and this is working for me...

<TextField
  variant="standard" // <== changed this
  margin="normal"
  required
  fullWidth
  id="phoneNumber"
  name="phoneNumber"
  autoComplete="phoneNumber"
  autoFocus
  onChange={handlePhoneNumberChange}
  placeholder="Phone Number"
  InputProps={{
    startAdornment: <AccountCircle />, // <== adjusted this
    disableUnderline: true, // <== added this
  }}
/>

These 2 props seem to be the key...

variant="standard"
 InputProps={{
        disableUnderline: true,
      }}
user_141432730

InputProps can be passed to the style the variants of the inputs. For outlined input there a class named .MuiOutlinedInput-notchedOutline which sets the border in this question's case. To modify this class, pass the styles to the notchedOutline prop in InputProps.


const useStyles = makeStyles(() => ({
  noBorder: {
    border: "none",
  },
}));

const TextInput = props => {
  const { onChange, type} = props;
  const classes = useStyles();

  return (
    <TextField
      variant="outlined"
      margin="normal"
      required
      fullWidth
      id="phoneNumber"
      disableUnderline={false}
      // label="Phone Number"
      name="phoneNumber"
      autoComplete="phoneNumber"
      autoFocus
      classes={{notchedOutline:classes.input}}

      // onChange={handlePhoneNumberChange}
      className={classes.textField}
      placeholder="Phone Number"
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <AccountCircle />
          </InputAdornment>
        ),
        classes:{notchedOutline:classes.noBorder}
      }}
    />
  );
};

Here is the working sandbox link: https://codesandbox.io/s/material-demo-forked-nhlde

user_112222820

I tried all the answers here.

Doesn't work

I found this InputBase It works very nicely. This is exactly what you should use.

They have provided the sandbox too Sandbox InputBase

user_74427840

to remove border in TextField fieldset in MUI 5,

simply add following.

    sx={{
      "& fieldset": { border: 'none' },
    }}
user_44119930

In your textField style add outline: 'none'

user_139989280

As at 2022, if your using MUI >= version 5, you can use some solutions here, and currently there's no where in the doc on how do this in Textfield.

Another nice component MUI provides is the Input, and luckily for us it accepts almost all props passed to Textfield, that's where you can do disableUnderline={false} and it will work as expected.

    <Input
      disableUnderline={true}
      variant="standard"
      autoFocus
      onChange={yourChangeHandler}
      value={value}
      placeholder="Title"
      fullWidth
    />
user_124903860

Finally, the following css works (2022)

  '& .MuiInput-root': {
    '&:before, :after, :hover:not(.Mui-disabled):before': {
      borderBottom: 0,
    },
  },
user_46462320

Added sx prop with below attributes in TextField and it worked fine for me

 <TextField
      sx={{
        input: {
          border: "none",
        },
        "::placeholder": { color: "white" },
      }}
 
    />
user_115690490

Try to override style

See example below

Example

user_191099810

disableUnderline
If true, the input will not have an underline.

<Input
            variant="standard"
            disableUnderline={true}
            required
            color="info"
            fullWidth
            margin="dense"
            focused
          />

API

user_87253950

The documentation doesn't offer any good way to do this
So you can select the Mui selector for that element and modify it directly
This worked for me. You can override the css

<TextField
  id="outlined-basic"
  label="Outlined"
  variant="outlined"
  sx={{ "& .MuiOutlinedInput-notchedOutline": { border: "none" } }}
 />
     
<TextField
   id="filled-basic"
   label="Filled"
   variant="filled"
   sx={{
          "& .MuiFilledInput-underline:before": {
            borderBottom: "none",
          },
          "& .MuiFilledInput-underline:after": {
            borderBottom: "none",
          },
          "& .MuiFilledInput-underline:hover:not(.Mui-disabled):before": {
            borderBottom: "none",
          },
        }}
 />

Please check it in codesandbox

user_68585300
Related