CSS 核取方塊樣式產生器

使用視覺化編輯器建立自訂 CSS 核取方塊。自由自訂動畫、顏色和形狀。

預設樣式

大小: 24px

圓角半徑: 50%

選取顏色

#6366f1

未選取顏色

#ffffff

邊框顏色

#d1d5db

預覽

Option AOption BOption C

HTML 程式碼

<label class="custom-checkbox">
    <input type="checkbox" />
    <span class="checkmark"></span>
    Label text
</label>

CSS 程式碼

.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    font-size: 14px;
    color: #374151;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox .checkmark {
    position: relative;
    height: 24px;
    width: 24px;
    background-color: #ffffff;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.custom-checkbox:hover .checkmark {
    border-color: #6366f1;
}

.custom-checkbox input:checked + .checkmark {
    background-color: #6366f1;
    border-color: #6366f1;
}

.custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked + .checkmark::after {
    display: block;
}

分享此工具

📖

使用方法

Step 1

選擇設計

選擇設計

選擇核取方塊設計範本

→

Step 2

自訂設定

自訂設定

調整顏色、大小、圓角、動畫等

→

Step 3

複製程式碼

複製程式碼

複製 HTML/CSS 程式碼

✨

功能特色

即時預覽

即時預覽自訂效果

豐富範本

提供多種動畫範本：打勾、滑動、彈跳等

無障礙設計

以語意 HTML 結構產生螢幕閱讀器友善的程式碼

❓

FAQ

以自訂 CSS 設計重新美化瀏覽器預設核取方塊的元件。

🔗相關工具

色碼換算工具

在 HEX、RGB 和 HSL 色碼之間互換。使用顏色選擇器和即時預覽直觀選色。

色彩選擇器

使用色輪和滑桿直覺地選取顏色。取得並複製 HEX、RGB 和 HSL 格式的色彩代碼。

圖片色彩擷取器

自動偵測圖片中的主要色彩並生成色彩調色盤。也可以點擊圖片上的任意位置來取得個別色彩。

圖片平均色彩擷取器

計算整張圖片或選定區域的平均色彩。適合用於選擇配色方案或縮圖背景顏色。

CSS 漸層產生器

使用拖動控制視覺化建立 CSS 漸層。支援線性、放射狀和圓錐漸層類型及預設。

CSS 陰影產生器

使用滑桿視覺化建立 CSS box-shadow。支援多重陰影和內陰影。