Bootstrap 4的自定义表单控件提供了一致的跨浏览器样式和布局，取代了浏览器默认的表单控件样式。它们建立在语义化和可访问的HTML标记之上，通过CSS实现自定义样式。
使用自定义CSS替换浏览器默认的复选框样式，提供更一致的视觉体验。
<!-- 基础自定义复选框 -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">选中此自定义复选框</label>
</div>
<!-- 内联自定义复选框 -->
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="customCheckInline1">
<label class="custom-control-label" for="customCheckInline1">选项 1</label>
</div>
使用自定义CSS替换浏览器默认的单选按钮样式。
<!-- 基础自定义单选按钮 -->
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">打开此自定义单选按钮</label>
</div>
<!-- 内联自定义单选按钮 -->
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">选项 1</label>
</div>
创建iOS风格的开关控件，用于切换设置。
<!-- 自定义开关 -->
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">切换此开关元素</label>
</div>
创建自定义样式的选择框，提供更好的视觉体验。
<!-- 自定义选择框 -->
<select class="custom-select" id="customSelect">
<option selected>打开此选择菜单</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
<!-- 自定义大小选择框 -->
<select class="custom-select custom-select-lg mb-3">
<option selected>大选择框</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
<!-- 自定义范围滑块 -->
<input type="range" class="custom-range" id="customRange" min="0" max="100" step="5">
创建自定义样式的文件上传控件，提供更好的用户体验。
<!-- 自定义文件上传 -->
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">选择文件</label>
</div>
<!-- 带验证的文件上传 -->
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile2" required>
<label class="custom-file-label" for="customFile2">选择文件（必填）</label>
<div class="invalid-feedback">请选择一个文件</div>
</div>
// 文件输入标签更新
document.querySelectorAll('.custom-file-input').forEach(function(input) {
input.addEventListener('change', function(e) {
var fileName = e.target.files[0] ? e.target.files[0].name : '选择文件';
var nextSibling = e.target.nextElementSibling;
nextSibling.innerText = fileName;
});
});
通过自定义CSS创建更独特的表单控件样式。
/* 大尺寸复选框 */
.custom-checkbox-lg .custom-control-label::before,
.custom-checkbox-lg .custom-control-label::after {
top: 0.2rem;
width: 1.5rem;
height: 1.5rem;
}
.custom-checkbox-lg .custom-control-label {
padding-left: 0.5rem;
line-height: 1.7;
}
/* 轮廓单选按钮 */
.custom-radio-outline .custom-control-input:checked ~ .custom-control-label::before {
background-color: transparent;
border-width: 2px;
}
.custom-radio-outline .custom-control-input:checked ~ .custom-control-label::after {
background-image: none;
background-color: #6f42c1;
border-radius: 50%;
transform: scale(0.5);
}
/* 大尺寸开关 */
.custom-switch-lg .custom-control-label::before {
width: 3rem;
height: 1.5rem;
border-radius: 1rem;
}
.custom-switch-lg .custom-control-label::after {
width: calc(1.5rem - 4px);
height: calc(1.5rem - 4px);
}
.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(1.5rem);
}
使用自定义表单控件时，遵循以下最佳实践可以提升用户体验和可访问性。