html - style - custom checkbox



每個瀏覽器中的偽內容特性各不相同 (1)

我改變了方法。 而不是使用內容和行高,我切換如下

label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: absolute;
padding:1px;
left: 0;
border:1px solid black;
border-radius: 50px;
}

input[type=radio]:checked + label:before {
border:1px solid blue;
background-color:blue;
box-shadow: 0 0 0 3px #fff inset;
width: 20px;
height: 20px;
}

JS小提琴

https://ffff65535.com

我正在使用自定義的CSS風格的收音機框,但現在的問題是

在IE11,FF36和Chrome中,檢查的廣播圈出現在差異位置。 下面是插圖

用來實現這個的CSS如下:

label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 32px;
}

input[type=radio] {
    display: none;
}

label:before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 22px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    border:1px solid $grey;
    border-radius: 50px;
}

input[type=radio]:checked + label:before {
    content: "\25CF";
    border:1px solid $light-blue;
    color: $light-blue;
    font-size: 26px;
    text-align: center;
    line-height: 0rem;
    padding-top: 7px;
}   

任何想法,請在所有瀏覽器工作相同。





pseudo-element