CSS Input圓圈是在網頁表單中常用到的一個樣式，經常用于表示單選框或復選框的狀態，讓用戶更加直觀地了解選項是否被選中。下面我們來詳細了解一下CSS Input圓圈。

CSS Input圓圈的實現是通過使用偽元素（pseudo-element）中的before或者after來實現的。通過在input元素的外層嵌套一個label元素，并通過在label元素下面插入偽元素before或after來實現外觀的渲染。而這個圓圈的大小和顏色可以通過CSS來控制。

<label class="custom-radio">
<input type="radio">
</label>
.custom-radio {
display: inline-block;
position: relative;
padding-left: 30px;
margin-right: 15px;
cursor: pointer;
font-size: 18px;
line-height: 24px;
}
.custom-radio:before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #000;
background: #fff;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.custom-radio input[type="radio"] {
display: none;
}
.custom-radio input[type="radio"]:checked+.custom-radio:before {
background: #000;
}

上面的代碼展示了一個簡單的單選框外觀實現，其中label元素的class屬性被設為custom-radio，通過設置其display屬性為inline-block來使其在行內顯示。在label元素下面的偽元素before指定了作為圓圈的樣式，通過設置其border-radius、border、background等屬性來控制它的外觀樣式。而input[type="radio"]元素是隱藏的，用戶點擊label元素的時候會選中隱形的input[type="radio"]元素，通過:checked偽元素來控制選中狀態下label的偽元素的背景顏色。

對于復選框，同樣的方法可以在偽元素中使用content屬性以及text-align屬性來模擬一個√號的樣式，實現復選框的選中狀態。此外，在一些UI框架中，也提供了已經封裝好的input圓圈樣式，用戶可以直接使用。