Question

我正在尝试制作没有间距的圆圈，其行为应类似于单选按钮。我能够做到这一点，但无法消除单选按钮之间的间距。两个圆之间的边距应为1 px，但不能超过该值。另外，宽度，高度不应超过8px，换句话说，我想要小圆圈。

这是代码

<input type='radio' name='a' checked/>
<input type='radio' name='a'/>


input[type='radio'] {
    -webkit-appearance:none;
    width:8px;
    height:8px;
    border:1px solid darkgray;
    border-radius:50%;
    outline:none;
    box-shadow:0 0 5px 0px gray inset;
}
input[type='radio']:hover {
    box-shadow:0 0 5px 0px orange inset;
}
input[type='radio']:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    /*margin: 20% auto;    */
    border-radius:50%;    
}
input[type='radio']:checked:before {
    background:green;
}

input[type='radio']:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    /*margin: 20% auto;    */
    border-radius:50%;    
}

Answer 1

您需要从单选按钮中删除边距，并将右边的像素设置为1px，也可以通过删除两个输入之间的空白来删除其他空间。

input[type='radio'] {
    -webkit-appearance:none;
    width:8px;
    height:8px;
    border:1px solid darkgray;
    border-radius:50%;
    outline:none;
    box-shadow:0 0 5px 0px gray inset;
    margin: 0 1px 0 0;
}
input[type='radio']:hover {
    box-shadow:0 0 5px 0px orange inset;
}
input[type='radio']:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    /*margin: 20% auto;    */
    border-radius:50%;    
}
input[type='radio']:checked:before {
    background:green;
}

input[type='radio']:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    /*margin: 20% auto;    */
    border-radius:50%;    
}

<input type='radio' name='a' checked/><input type='radio' name='a'/>

CSS；-带圆圈的单选按钮，它们之间的间距很小

1 个答案: