删除出现在TextField type =“ time” material-ui React上的箭头和十字

Question

我正在使用material-ui react textField，其类型为time，我想删除悬停和焦点右侧显示的箭头和十字。

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文档中检查受支持的浏览器列表。 Here是-webkit-inner-spin-button的示例

Answer 2

对我来说很有效。

vcvars64.bat