显示默认外观的 IE 自定义输入

Question

我正在尝试创建一个自定义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;

    }

}

Answer 1

也不是最佳解决方案，也不是最佳实践，但这是我带来的：我的 JSXconst CheckBox2: FC<ICheckBox2Props> = ({ label, type = "checkbox", className, labelClassName, ...props }) => {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <label className={[styles.container, className ?? ""].join(" ")}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {...props}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type={type}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={styles.inputContainer}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {label && <span className={[styles.label, labelClassName ?? ""].join(" ")} >{label}</span>}&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; );};CSS.container {&nbsp; &nbsp; display: inline-flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; margin-right: 48px;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; .inputContainer{&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; &nbsp; height: 16px;&nbsp; &nbsp; &nbsp; &nbsp; width: 16px;&nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #ABACAD;&nbsp; &nbsp; &nbsp; &nbsp; border-radius: 2px;&nbsp; &nbsp; }&nbsp; &nbsp; >input{&nbsp; &nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; &nbsp; &nbsp; height: 16px;&nbsp; &nbsp; &nbsp; &nbsp; width: 16px;&nbsp; &nbsp; &nbsp; &nbsp; &:checked + .inputContainer {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 16px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 16px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #2D3641;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #2D3641;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: url(../../../../assets/images/icons/ico_check.png);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size: 10px 9px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; }}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {&nbsp; &nbsp; .container{&nbsp; &nbsp; &nbsp; &nbsp; .inputContainer{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 0px&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}

Answer 2

我可以看到您在代码中使用了 CSS外观。&nbsp;&nbsp;&nbsp;&nbsp;-webkit-appearance:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;-moz-appearance:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;-ms-appearance:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;-o-appearance:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;appearance:&nbsp;none;IE 浏览器不支持CSS外观，并且 -ms 前缀无助于修复它。我认为这是问题的原因。参考：CSS外观对于 CSS 外观，我没有任何选择。您可以尝试使用开发者工具查看应用的 CSS 属性。它可以帮助理解问题。