自定义注册表单响应式问题：小屏幕下Country字段尺寸异常

算力阿峰

2026-7-22

问题

我用HTML和CSS制作自定义输入字段，PC端显示正常，但小屏幕设备上Country选择字段的尺寸比其他输入字段大。City和Country字段的HTML代码如下：

<div class="d-flex align-items-center justify-content-center">
    <div class="form-group row">
        <span class="form-relative">
            <div class="col-sm-8">
                <input type="text" class="clean-slide" id="city" th:field="*{city}"
                       required="required" maxlength="45" minlength="2"/>
                <label for="city">City</label>
            </div>
        </span>
    </div>
</div>

<div class="d-flex align-items-center justify-content-center">
    <div class="form-group row">
        <span class="form-relative">
            <div class="col-sm-8">
                <select class="clean-slide" th:field="*{country}" id="country">
                    <th:block th:each="country : ${listCountries}">
                    <option th:value="${country.countryId}">[[${country.name}]]</option>
                    </th:block>
                </select>
                <label for="country">Country</label>
            </div>
        </span>
    </div>
</div>

使用的clean-slide类CSS代码如下：

.clean-slide {
    position: relative;
    display: inline-block;
    width: 400px;
    padding: 10px 0 10px 90px;
    font-family: "Open Sans", sans;
    font-weight: 400;
    color: #377D6A;
    background: #efefef;
    border: 0;
    border-radius: 3px;
    outline: 0;
    text-indent: 60px;
    transition: all .3s ease-in-out;
}
.clean-slide::-webkit-input-placeholder {
    color: #efefef;
    text-indent: 0;
    font-weight: 300;
}
.clean-slide + label {
    display: inline-block;
    position: absolute;
    transform: translateX(0);
    top: 0;
    left: auto;
    bottom: -8px;
    padding: 15px 15px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #032429;
    text-align: left;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all .3s ease-in-out, color .3s ease-out;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    overflow: hidden;
}
.clean-slide + label:after {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    width: 100%;
    background: #0c9669;
    z-index: -1;
    transform: translate(0);
    transition: all .3s ease-in-out;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.clean-slide:focus,
.clean-slide:active {
    color: #377D6A;
    text-indent: 0;
    background: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.clean-slide:focus::-webkit-input-placeholder,
.clean-slide:active::-webkit-input-placeholder {
    color: #aaa;
}
.clean-slide:focus + label,
.clean-slide:active + label {
    color: #fff;
    text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
    transform: translateX(-100%);
}
.clean-slide:focus + label:after,
.clean-slide:active + label:after {
    transform: translate(100%);
}

@media (max-width: 768px) {
    .clean-slide {
        width: 100%;
    }
    .form-group.row label[for] {
        position: absolute;
        left: 15px;
        top: 12px;
        font-size: 12px;
        padding: 2px 5px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

怀疑是<select>或<option>元素导致异常，同时使用了Bootstrap框架，该如何解决？

解决方案

问题根源是<select>的浏览器默认样式、Bootstrap默认样式与自定义CSS未完全兼容，导致小屏幕下尺寸偏差，按以下步骤修复：

统一盒模型并清除select默认样式
在.clean-slide类中新增以下属性，确保select和input的渲染规则一致：
```
.clean-slide {
    /* 保留原有属性，新增以下 */
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
```
- box-sizing: border-box：让padding不会额外增加元素总宽度，避免超出父容器
- appearance: none：移除浏览器默认的select下拉箭头样式，避免占用额外空间，确保自定义样式完全生效

修正小屏幕下的padding与文本缩进
小屏幕下label位置已调整，但select仍保留左侧90px padding，导致视觉尺寸异常。修改媒体查询内的样式：

@media (max-width: 768px) {
    .clean-slide {
        width: 100%;
        padding: 10px 15px; /* 替换原不对称padding，让左右内边距一致 */
        text-indent: 0; /* label已移至顶部，无需再缩进文本 */
    }
}

覆盖Bootstrap对select的样式干扰
Bootstrap的默认表单样式可能给select添加了额外边框、内边距，显式在.clean-slide中明确相关属性：
```
.clean-slide {
    /* 保留原有属性，新增以下 */
    border: none;
    background-color: #efefef;
}
```
确保select和input的背景、边框样式完全统一。
确保父容器约束生效
给.col-sm-8添加box-sizing: border-box，避免父容器的padding导致子元素溢出：
```
.col-sm-8 {
    box-sizing: border-box;
}
```

内容的提问来源于stack exchange，提问作者nikolaPantelic98

自定义注册表单响应式问题：小屏幕下Country字段尺寸异常

问题 #

解决方案 #

问题

解决方案