分享 16 个常用的自定义表单组件样式代码片段（上）

大家好，今天给大家分享 16个常用的自定义表单组件样式代码片段上半部分，本文尽量用最简单的CSS布局编写，对你有所启发，也许你有其他的写法，期待你在评论区的分享。

1、Button with icon（图标按钮）

图标按钮，在设计中比较常见，示例图如下所示：

HTML部分

<button class="button">
    <!-- Icon -->
    ...

    <!-- Label -->
    ...
</button>

CSS部分

.button {
    /* Center the content */
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

2、Chip（标签）

带叉号的标签，我们也会常用到，在一些博客内容网站比较常见，点击对应的标签就会看到相关的列表内容，如下图所示：

HTML部分

<div class="chip">
    <!-- Content -->
    <div class="chip__content">
        ...
    </div>

    <!-- The close button -->
    <!-- See https://csslayout.io/patterns/close-button -->
    ...
</div>

css部分

.chip {
    /* Center the content */
    align-items: center;
    display: inline-flex;
    justify-content: center;

    /* Background color */
    background-color: rgba(0, 0, 0, 0.1);

    /* Rounded border */
    border-radius: 9999px;

    /* Spacing */
    padding: 4px 8px;
}

.chip__content {
    margin-right: 4px;
}

3、Custom checkbox button（自定义复选框）

原生的复选框不好看，一般我们需要进行美化，让其更适应当前的设计，如下所示：