How can I delete the arrow textfield number?

Question

How can I delete the arrows of a textField number?

this doesn't work:

const useStyles = makeStyles(theme => ({
    const theme = createMuiTheme({
    MuiInput: {
      root: {
        "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
          "-webkit-appearance": "none",
          display: "none"
        }
      }
    }
    })

by mean this question this should work, but in my case no

Disable webkit's spin buttons on input type="number"?

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

my textfield is

<TextField
       InputProps={{ classes: { input: classes.inputStyle } }}     
       size="small"
       type="number"

but when i've applied my textField grow too much, i want to size be small

score 2 · Accepted Answer · answered Jan 28 '21 at 03:39

CSS approach is right. this style should be applied to the input element and to apply the styles to the input element, target the input class instead of root. And another issue is here you're trying to use makeStyles and createMuiTheme at once which is not right.

To style using createMuiTheme this is the way:

const theme = createMuiTheme({
    overrides: {
        MuiInput: {
            input: {
                "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
                    "-webkit-appearance": "none",
                    display: "none"
                }
            }
        }
    }
});

And then wrap your app within <MuiThemeProvider>.

To do this using makeStyles:

const useStyles = makeStyles((theme) => ({
    inputStyle: {
        "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
            "-webkit-appearance": "none",
            display: "none"
        }
    }
}));

And then target the input class by using InputProps prop.

export default function TextStyle() {
    const classes = useStyles();

    return (
        <div>
            <TextField
                InputProps={{ classes: { input: classes.inputStyle } }}
                type="number"
            />
        </div>
    );
}

Here is the working demo:

I guess, some other class might be getting overridden. Because the demo is working fine... — Rajiv, Jan 28 '21 at 13:44
i tried to change to length in your demo but never change, i tried with size="small" — , Jan 28 '21 at 13:49
actually, width doesn't change with the `size` prop, only height. I've created two texfields with the `small` size and `medium` size and they have the difference in their height. for width try giving them style using className — Rajiv, Jan 28 '21 at 14:05

How can I delete the arrow textfield number?

1 Answers1