1

I am having something like this:

enter image description here

How do I expand the width that the border it will also cover the icon on the left like this:

enter image description here

My HTML:

.input-group-text {
  width: 48px;
  border-right: none;
  background-color: #ffffff;
}
[class^="fa-"], [class*=" fa-"] {
  display: inline-block;
  width: 100%;
}
.LoginInput {
  border-left: none;
  position: relative;
}
<b-input-group>
  <b-input-group-prepend>
    <span class="input-group-text"><i class="fa fa-user fa-lg"></i></span>
  </b-input-group-prepend>
  <b-form-input class="LoginInput" size="lg" placeholder="Username">
  </b-form-input>
</b-input-group>

<b-input-group>
  <b-input-group-prepend>
    <span class="input-group-text"><i class="fa fa-lock fa-lg"></i></span>
  </b-input-group-prepend>
    <b-form-input class="LoginInput" size="lg" type="password" placeholder="Password">
    </b-form-input>
</b-input-group>
a stone arachnid
  • 1,272
  • 1
  • 15
  • 27
quanpham0805
  • 277
  • 2
  • 5
  • 14
  • Have you tried something like [this](https://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form)? – Sammii Nov 11 '18 at 00:27
  • I tried the padding left but it doesn't work, it moves the text area to the right and add the padding – quanpham0805 Nov 11 '18 at 00:38

1 Answers1

0

I found this working demo by James Barnett. He uses font awesome icons with css to implement position: absolute; on the icon and text indent to implement what you are trying to achieve. He places the icon and the input field inside a container div.

HTML

<div class="search">
  <span class="fa fa-search"></span>
  <input placeholder="Search term">
</div>

CSS

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-    awesome.min.css");
  body { margin: 30px; }

.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
 }

.search input {
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}

.search input { text-indent: 32px;}
.search .fa-search { 
  position: absolute;
  top: 10px;
  left: 10px;
}

Find the full thread here.

I hope this is of some help.

Sammii
  • 21
  • 6
  • I could position the icon easily, but when in focus mode the icon just disapear. – quanpham0805 Nov 11 '18 at 02:17
  • 1
    My suggestion would be to follow the code as per the example without focus, as that does everything you want it to and can be adapted to use the icons you want – Sammii Nov 11 '18 at 09:16