将边框应用于表单中的所有字段和标签

Posted 2023-03-06

【中文标题】将边框应用于表单中的所有字段和标签

【英文标题】：Apply borders to all fields and labels in a form

【发布时间】：2017-12-25 00:01:06

【问题描述】：

我需要设置 bootstrap 3 表单的样式，例如每个表单字段和标签周围都有一个边框。像这样 -

我不知道该怎么做。这是我实现这一目标的尝试（请扩展输出，以便在每行中看到 2 列）-

https://jsfiddle.net/yy7ddtby/15/

.custom-label 
  line-height: 3.3em !important;


.label-size 
  /*font-size: 10px;*/
  line-height: 2.1em;
  /*padding-right:0px;
   width: 10%;*/


.border 
  color: #555;
  border: 1px solid #ccc;
  border-radius: 1px;
  padding: 5px;

<div class="container-fluid">

  <form>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="name" class="col-md-4 label-size custom-label border">Name</label>
          <div class="col-md-8 border">
            <input type="text" id="name" class="form-control input-field">
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="gender" class="col-md-4  label-size custom-label  border">Gender</label>
          <div class="col-md-8  border">
            <select id="gender" class="form-control input-field">
              <option value="Male">Male</option>
              <option value="Female">Female</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label class="col-md-4  label-size custom-label">Functions</label>
          <div class="checkbox col-md-8 label-size">
            <label>
                  <input type="checkbox" id="Func1"> Func1</label>
            <label>
                  <input type="checkbox" id="Func2">Func2</label>
            <label>
                  <input type="checkbox" id="Func3">Func3</label>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="country" class="col-md-4  label-size custom-label">Country</label>
          <div class="col-md-8">
            <select id="country" class="form-control input-field">
              <option>Select</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="options" class="col-md-4 label-size custom-label">Options</label>
          <div class="col-md-8">
            <select id="options" class="form-control input-field">
              <option>Select</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="addr" class="col-md-4 label-size custom-label">ADDR</label>
          <div class="col-md-8">
            <input type="text" id="addr" class="form-control input-field">
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="author" class="col-md-4  label-size custom-label">Author</label>
          <div class="col-md-8">
            <input type="text" id="author" class="form-control input-field">
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label for="range1" class="col-md-4  label-size custom-label">Range1</label>
          <div class="col-md-3">
            <input type="text" id="range1" class="form-control input-field">
          </div>
          <div class="col-md-2">
            to
          </div>
          <div class="col-md-3">
            <input type="text" id="range2" class="form-control input-field">
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="ip" class="col-md-4 label-size custom-label">IP</label>
          <div class="col-md-8">
            <input type="text" id="ip" class="form-control input-field">
          </div>
        </div>
      </div>

    </div>



  </form>

</div>

我尝试使用称为边框的自定义 CSS 设置第一行的样式。但是，它看起来不像我想要的那样。它生成的边框非常不整齐，而不是图像中的方式。

如何才能实现带有边框的预期 UI？

【参考方案1】：

我实际上会给整行加上边框，然后在表单元素上使用左/右边框将它们分开。

这是基本的想法：

.row 
  border: 2px solid black;


.form-group > label 
  border-right: 2px solid black;


input 
  border-right: 2px solid black;

revised demo

【讨论】：

非常感谢您分享修改后的演示。如何摆脱行之间的空格并且不显示两条重叠的线？例如，“名称”和“功能”行之间有一个空格。此外，需要在连续第二个标签之前有一个边框，例如，在“性别”、“国家”等之前。

谢谢 Michael_B。我会试一试，然后用更新的小提琴回来。