Удалите стрелку и крест, который появляется для TextField type = «time» material-ui React

Question

Я использую Material-UI реагировать textField с типом времени, я хочу удалить стрелку и крестик, который появляется справа при наведении и фокус.

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

Answer 1

Это зависит от версии браузера, но для большинства современных браузеров этот CSS должен работать.

//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;
}

Итак, основываясь на вашем примере, вам нужно отредактировать стиль textField, чтобы он выглядел следующим образом

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"
     }
  }
});

Но помните, что это может не работать для каждого браузера. Например, чтобы удалить кнопку очистки в IE 10, вам нужно использовать этот CSS.

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

Вы можете проверить список поддерживаемых браузеров в -webkit документах. Здесь является примером для -webkit-inner-spin-button