Remove the arrow and cross that appears for TextField type=“time” material-ui React

Question

I am using the material-ui react textField with type time , I want to remove the arrow and cross that appears on the right on hover and focus.

https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/pickers/DatePickers.js

Giuliana

Answer 1

It depends on the browser version, but for most up to date browsers this CSS should do the work.

//remove X
input[type="time"]::-webkit-clear-button {
    display: none;
}

//remove inside of arrows button
input[type="time"]::-webkit-inner-spin-button {
  display: none;
}

//remove outsideof arrows button
input[type="time"]::-webkit-outside-spin-button {
  display: none;
}

So based on your example, you need to edit textField style, so it would look like that

const styles = theme => ({
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 200,
    "& input::-webkit-clear-button, & input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
            display: "none"
     }
  }
});

But remember that it may not work for every browser. For example, to remove clear button on IE 10 you will need to use this CSS.

input[type="time"]::-ms-clear {
    display: none;
}

You can check list of supported browsers in -webkit docs. Here is an example for -webkit-inner-spin-button

Photon

Answer 2

It works out for me.

MuiInput: {
      root: {
        "& input::-webkit-clear-button, & input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
          display: "none",
          margin: 80
        },
        "&$disabled": {
          color: palette.text.primary,
          '&:before': {
            borderBottom: 'none!important',
          },
          '& svg': {
            display: 'none',
          },
        },
      },
      underline: {
        '&:after': {
          transition: 'none',
        },
      },
    }

Dup

Answer 3

If someone needs the solution with Styled Components, here is mine that works for me.

const StyledTextField = styled(TextField)`
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    display: none;
  }
`;


<StyledTextField
          error={error}
          InputLabelProps={{ color: 'primary' }}
          type="number"
          value={value}
          inputProps={{ min: 0 }}
          onClick={handleOnClick}
          onChange={handleOnChange}
          onBlur={handleOnBlur}
          helperText={
            ...
          }
        />

Jeweljeweler

By far the most simple solution, thanks – Moonstruck