我正在使用 type 为 time 的 material-ui react textField,我想删除悬停和聚焦时出现在右侧的箭头和十字。
https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/pickers/DatePickers.js
最佳答案
这取决于浏览器版本,但对于大多数最新的浏览器,这个 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 的一个例子
关于reactjs - 去掉TextField type =“time” material-ui React出现的箭头和十字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56101519/