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

Question

我正在尝试创建一个自定义input，它可以是 typeradio或checkbox. 但是我在 IE 浏览器上遇到了 CSS 的问题。预期结果：IE浏览器结果输入 JSXconst 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

也不是最佳解决方案，也不是最佳实践，但这是我带来的：

我的 JSX

const CheckBox2: FC<ICheckBox2Props> = ({ label, type = "checkbox", className, labelClassName, ...props }) => {

    return (

        <label className={[styles.container, className ?? ""].join(" ")}>

            <input

                {...props}

                type={type}

            />

            <div className={styles.inputContainer}>

            </div>

            {label && <span className={[styles.label, labelClassName ?? ""].join(" ")} >{label}</span>}

        </label>

    );

};

CSS

.container {

    display: inline-flex;

    align-items: center;

    margin-right: 48px;

    position: relative;

    .inputContainer{

        position: absolute;

        display: flex;

        justify-content: center;

        align-items: center;

        cursor: pointer;

        height: 16px;

        width: 16px;

        box-sizing: border-box;

        border: 1px solid #ABACAD;

        border-radius: 2px;

    }

    >input{

        opacity: 0;

        height: 16px;

        width: 16px;

        &:checked + .inputContainer {

            height: 16px;

            width: 16px;

            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;

        } 

    }

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    .container{

        .inputContainer{

            top: 2px;

            left: 0px

        }

    }

}

Answer 2

我可以看到您在代码中使用了 CSS外观。

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
        appearance: none;

IE 浏览器不支持CSS外观，并且 -ms 前缀无助于修复它。我认为这是问题的原因。

参考：

CSS外观

对于 CSS 外观，我没有任何选择。

您可以尝试使用开发者工具查看应用的 CSS 属性。它可以帮助理解问题。