第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

顯示默認(rèn)外觀的 IE 自定義輸入

顯示默認(rèn)外觀的 IE 自定義輸入

POPMUISE 2022-06-16 15:44:09
我正在嘗試創(chuàng)建一個(gè)自定義input,它可以是 typeradio或checkbox. 但是我在 IE 瀏覽器上遇到了 CSS 的問題。預(yù)期結(jié)果:IE瀏覽器結(jié)果輸入 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;    }}
查看完整描述

2 回答

?
慕哥9229398

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超6個(gè)贊

也不是最佳解決方案,也不是最佳實(shí)踐,但這是我?guī)淼模?/p>


我的 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

        }

    }

}


查看完整回答
反對 回復(fù) 2022-06-16
?
MMTTMM

TA貢獻(xiàn)1869條經(jīng)驗(yàn) 獲得超4個(gè)贊

我可以看到您在代碼中使用了 CSS外觀。

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

IE 瀏覽器不支持CSS外觀,并且 -ms 前綴無助于修復(fù)它。我認(rèn)為這是問題的原因。

http://img1.sycdn.imooc.com//62aadf810001007205880382.jpg

參考:

CSS外觀

對于 CSS 外觀,我沒有任何選擇。

您可以嘗試使用開發(fā)者工具查看應(yīng)用的 CSS 屬性。它可以幫助理解問題。


查看完整回答
反對 回復(fù) 2022-06-16
  • 2 回答
  • 0 關(guān)注
  • 146 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)