Clever Geek Handbook

Apply borders to all fields and labels on the form

I need to style bootstrap form 3, for example there is a border around each form field and label. Something like that -

Borders around fields

I cannot figure out how to do this. Here is my attempt at achieving this (please expand the output so you can see 2 columns per row)

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>
Run codeHide result


I tried to style the first line using native CSS called border. However, it doesn't look the way I want it to. The border he creates is rather untidy and not exactly like the image.

How can I achieve the expected interface with borders?

+3


source to share


1 answer


I would actually give the entire line to a border and then use left / right borders on the form elements to separate them.

Here's the basic idea:



.row {
  border: 2px solid black;
}

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

input {
  border-right: 2px solid black;
}

modified demo

0


source






More articles:


All Articles