菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 4 自定义表单


Bootstrap 4 自定义表单

Bootstrap 4 提供了自定义表单元素,旨在替换浏览器默认样式。

自定义范围

默认范围


自定义复选框

要创建自定义复选框,请将一个容器元素(如 <div>)用类 .custom-control.custom-checkbox 包裹在复选框周围。然后将 .custom-control-input 添加到 type="checkbox" 的输入框中。

提示: 如果您使用 label 作为附带文本,请为其添加 .custom-control-label 类。请注意,for 属性的值应与复选框的 id 匹配。

示例

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">勾选此自定义复选框</label>
  </div>
</form>
自己动手试一试 »

自定义开关

要创建自定义“切换开关”,请将一个容器元素(如 <div>)用类 .custom-control.custom-switch 包裹在复选框周围。然后将 .custom-control-input 类添加到复选框中。

示例

<form>
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="switch1">
    <label class="custom-control-label" for="switch1">切换我</label>
  </div>
</form>
自己动手试一试 »

自定义单选按钮

要创建自定义单选按钮,请将一个容器元素(如 <div>)用类 .custom-control.custom-radio 包裹在单选按钮周围。然后将 .custom-control-input 添加到 type="radio" 的输入框中。

提示: 如果您使用 label 作为附带文本,请为其添加 .custom-control-label 类。请注意,for 属性的值应与单选按钮的 id 匹配。

示例

<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
    <label class="custom-control-label" for="customRadio">自定义单选框</label>
  </div>
</form>
自己动手试一试 »

内联自定义表单控件

如果您想让自定义表单控件并排显示(内联),请将 .custom-control-inline 添加到包装器/容器中。

示例

<form>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">自定义单选框 1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">自定义单选框 2</label>
  </div>
</form>
自己动手试一试 »


自定义选择菜单

要创建自定义选择菜单,请将 .custom-select 类添加到 <select> 元素中。



示例

<form>
  <select name="cars" class="custom-select">
    <option selected>自定义选择菜单</option>
    <option value="volvo">沃尔沃</option>
    <option value="fiat">菲亚特</option>
    <option value="audi">奥迪</option>
  </select>
</form>
自己动手试一试 »

自定义选择菜单尺寸

使用 .custom-select-sm 类创建小型选择菜单,使用 .custom-select-lg 类创建大型选择菜单。

示例

<form>
  <!-- 小号 -->
  <select name="cars" class="custom-select custom-select-sm">
    <option selected>小型自定义选择菜单</option>
    <option value="volvo">沃尔沃</option>
    <option value="fiat">菲亚特</option>
    <option value="audi">奥迪</option>
  </select>

  <!-- 大号 -->
  <select name="cars" class="custom-select custom-select-lg">
    <option selected>大型自定义选择菜单</option>
    <option value="volvo">沃尔沃</option>
    <option value="fiat">菲亚特</option>
    <option value="audi">奥迪</option>
  </select>
</form>
自己动手试一试 »

自定义范围

要创建自定义范围菜单,请将 .custom-range 类添加到 type="<range>" 的输入框中。



示例

<form>
  <label for="customRange">自定义范围</label>
  <input type="range" class="custom-range" id="customRange" name="points1">
</form>
自己动手试一试 »

自定义文件上传

要创建自定义文件上传,请将一个容器元素用类 .custom-file 包裹在 type="file" 的输入框周围。然后将 .custom-file-input 添加到其中。

提示: 如果您使用 label 作为附带文本,请为其添加 .custom-file-label 类。请注意,for 属性的值应与复选框的 id 匹配。

默认文件

请注意,如果您希望在选择特定文件时显示文件名,还必须包含一些 jQuery 代码。

示例

<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">选择文件</label>
  </div>
</form>

<script>
// 如果您希望在选择文件时显示文件名,请添加以下代码
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持