圓形複選框邊框不會改變

Question

所以我試圖改變border的圓角checkbox我在我的代碼中。我想使border更薄。

.roundedOne { 
 
    width: 28px; 
 
    height: 28px; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 1100px; 
 
    background: white; 
 
    background: -webkit-linear-gradient(top, white 0%, black 0%, black 80%); 
 
    background: linear-gradient(to bottom, white 0%, black 0%, black 80%); 
 
    border-radius: 100px; 
 
} 
 
.roundedOne label { 
 
    width: 20px; 
 
    height: 20px; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    left: 4px; 
 
    top: 4px; 
 
    background: white; 
 
    border-radius: 100px; 
 
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white; 
 
} 
 
.roundedOne label:after { 
 
    content: ''; 
 
    width: 16px; 
 
    height: 16px; 
 
    position: absolute; 
 
    top: 2px; 
 
    left: 2px; 
 
    background: #19B5FE; 
 
    opacity: 0; 
 
    border-radius: 100px; 
 
} 
 
.roundedOne label:hover::after { 
 
    opacity: 0; 
 
} 
 
.roundedOne input[type=checkbox] { 
 
    visibility: hidden; 
 
} 
 
.roundedOne input[type=checkbox]:checked + label:after { 
 
    opacity: 1; 
 
}

<div class="roundedOne"> 
 
    <input type="checkbox" value="None" id="roundedOne" name="check" checked /> 
 
    <label for="roundedOne"></label> 
 
</div>

我怎樣才能讓外面border這是黑色的，變瘦了？ 另外我怎樣才能改變它，因爲現在當我進入頁面時，它已經被填滿了，我希望當有人進入頁面時它會被填充。

這裏是我想要的東西：

Answer 1

變化width/height您.roundedOne（其更新到只是一個單一的div）然後改變top/left居中背景上的黑色內input。

刪除HTML中的checked當您進入頁面時不會被選中。

body { 
 
    background: gray; 
 
    margin: 0 
 
} 
 
div { 
 
    width: 26px; 
 
    height: 27px; 
 
    position: relative; 
 
    left: 0; 
 
    /*top: 1100px; */ 
 
    background: white; 
 
    background: -webkit-linear-gradient(top, white 0%, black 0%, black 80%); 
 
    background: linear-gradient(to bottom, white 0%, black 0%, black 80%); 
 
    border-radius: 100px; 
 
} 
 
label { 
 
    width: 20px; 
 
    height: 20px; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    left: 3px; 
 
    top: 3px; 
 
    background: white; 
 
    border-radius: 100px; 
 
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white; 
 
} 
 
label:after { 
 
    content: ''; 
 
    width: 16px; 
 
    height: 16px; 
 
    position: absolute; 
 
    top: 2px; 
 
    left: 2px; 
 
    background: #19B5FE; 
 
    opacity: 0; 
 
    border-radius: 100px; 
 
} 
 
span { 
 
    display: inline-block; 
 
    margin-left: 30px; 
 
    min-width:100px 
 
} 
 
label:hover::after { 
 
    opacity: 0; 
 
} 
 
input[type=checkbox] { 
 
    visibility: hidden; 
 
} 
 
input[type=checkbox]:checked + label:after { 
 
    opacity: 1; 
 
}

<div> 
 
    <input type="checkbox" value="None" id="roundedOne" name="check" /> 
 
    <label for="roundedOne"> 
 
    <span>Checkbox 1</span> 
 
    </label> 
 
</div> 
 
<div> 
 
    <input type="checkbox" value="None" id="roundedTwo" name="check" /> 
 
    <label for="roundedTwo"> 
 
    <span>Checkbox 2</span> 
 
    </label> 
 
</div> 
 
<div> 
 
    <input type="checkbox" value="None" id="roundedThree" name="check" /> 
 
    <label for="roundedThree"> 
 
    <span>Checkbox 3</span> 
 
    </label> 
 
</div> 
 
<div> 
 
    <input type="checkbox" value="None" id="roundedFour" name="check" /> 
 
    <label for="roundedFour"><span>Checkbox 4</span> 
 
    </label> 
 
</div>