As you can see, the form I have three input fields with inline labels. Actually, I'm providing the input field a border width, but the issue is that the bottom and right borders are taken by default. I'm not sure what the problem is. Second, the inside border appears when I click on input.

I wish to correct these bugs.

       .left-align{
            margin-right: 75px;
        }
        .search-input {
            margin-top: 5px;
            margin-bottom: 5px;
            display:inline-block;
            *display: inline;     /* for IE7*/          /* for IE7*/
            vertical-align:middle;
            margin-left:14px;
            border-width: 2px !important;
        }

        .search-label {
            display:inline-block;
            *display: inline;     /* for IE7*/
            zoom:1;              /* for IE7*/
            float: left;
            padding-top: 5px;
            text-align: right;
            width: 80px;
        }

          <div  >

                  <div >
                      <label  >Warehouse</label>
                      <input  type="search"/>
                  </div>
                  <div >
                      <label >Location</label>
                      <input  type="search"/>
                  </div>
                  <div >
                      <label >Employee</label>
                      <input  type="search"/>
                  </div>

           </div>

CodePudding user response：

1. By default border takes it's default border color, so we have to mention border-color.
2. On focus in the input field it takes it's default border radius to 10px, so it also need to be declared(border-radius) as your wish to match with border radius.

By doing this, you can correct those bugs.