删除 TextField type=“time” material-ui React 出现的箭头和十字
Remove the arrow and cross that appears for TextField type=“time” material-ui React
我正在使用类型为 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
的示例
对我来说很有效。
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',
},
},
}
我正在使用类型为 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
的示例对我来说很有效。
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',
},
},
}