javascript - 显示默认外观的 IE 自定义输入
问题描述
我正在尝试创建一个自定义input
,它可以是 typeradio
或checkbox
. 但是我在 IE 浏览器上遇到了 CSS 的问题。
预期结果:
IE浏览器结果
输入 JSX
const CheckBox2: FC<ICheckBox2Props> = ({ label, type = "checkbox", className, labelClassName, ...props }) => {
return (
<label className={[styles.container, className ?? ""].join(" ")}>
<input
{...props}
type={type}
/>
{label && <span className={[styles.label, labelClassName ?? ""].join(" ")} >{label}</span>}
</label>
);
};
export default CheckBox2;
输入 CSS
.container {
display: inline-flex;
align-items: center;
margin-right: 48px;
>input {
cursor: pointer;
height: 17px;
width: 17px;
box-sizing: border-box;
border: 1px solid #ABACAD;
border-radius: 2px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
&:checked {
height: 17px;
width: 17px;
box-sizing: border-box;
border: 1px solid #2D3641;
border-radius: 2px;
background-color: #2D3641;
background-image: url(../../../../assets/images/icons/ico_check.png);
background-size: 10px 9px;
background-repeat: no-repeat;
background-position: center;
}
}
.label{
margin-left: 16px;
}
}
解决方案
我可以看到您在代码中使用了 CSS外观。
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
IE 浏览器不支持CSS外观,并且 -ms 前缀无助于修复它。我认为这是问题的原因。
参考:
对于 CSS 外观,我没有任何选择。
您可以尝试使用开发者工具查看应用的 CSS 属性。它可以帮助理解问题。
推荐阅读
- image-processing - 如何在图像上生成概率分布
- r - 如何将 - 添加到 r 中的日期?
- javascript - 如何引用实际对象而不是所有对象
- ruby-on-rails - 如何生成指向个人资料 ID 的链接?
- mysql - Debian 上的 MariaDB:语法错误:如何将 unix 套接字身份验证切换回基于密码的身份验证?
- java - 我怎样才能得到那个值?
- nopcommerce - CodeFirstInstallationService 的用法?
- spring-boot - Docker 容器中的 Spring Cloud Config 无法访问
- html - 在动画中调整 div 大小时的变换原点问题
- r - 根据唯一 ID 和日期将值计算为百分比变化