How to add static text to an input box in bootstrap?

Question

I have an HTML as follows :

<div class="row">
 <div class="col-lg-4">
  <label for="email">E-Mail ID:</label>
 </div>
 <div class="col-lg-8 input-group" style="width:50%">
  <input type="text" id="userEmail" class="form-control" name="email" required />
  <span class="input-group-addon">@gmail.com</span>
  <hr/>
 </div>
</div>

I would like to add static text inside the box on the right hand side.

Eg (@gmail.com, the way it is on the google sign up form check image). Help much appreciated!

please refer to this answer "http://stackoverflow.com/questions/22941903/placing-static-text-at-the-end-of-an-input-field-using-html" — sahil gupta, Aug 04 '15 at 07:06
Tried doing that @sahilgupta .. But It didn't quite work out for me — TheLuminor, Aug 04 '15 at 07:08
Just curious, why don't you use the `placeholder` attribute? — DavidDomain, Aug 04 '15 at 07:08
When clicked, the input box, the placeholder value disappears. I want the "@gmail.com" part to stay. Hence I removed the placeholder @DavidDomain — TheLuminor, Aug 04 '15 at 07:11

Joel Almeida · Accepted Answer · 2015-08-04T07:08:44.287

5

Something like this ?

.input-group input {
  border-right: 0px solid transparent;
}

.input-group .input-group-addon {
  background-color: transparent;
  border-left: 0px solid transparent;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
    <div class="col-lg-4">
        <label for="email">E-Mail ID:</label>
    </div>
    <div class="col-lg-8 input-group" style="width:50%">
        <input type="text" id="userEmail" class="form-control" name="email" required>
        <span class="input-group-addon">@gmail.com</span>
    </div>
</div>

edited Aug 04 '15 at 07:08

answered Aug 04 '15 at 07:03

Joel Almeida

7,939
5
25
51

I want to avoid using CSS. Is there a workaround to that, using entirely bootstrap? @JoelAlmedia – TheLuminor Aug 04 '15 at 07:05
@TheLuminor to fully achieve what you want you have to overwrite a little of the bootstrap CSS for the borders. Check edit. – Joel Almeida Aug 04 '15 at 07:12
Thanks a lot :) works like a charm! Cheers :) @JoelAlmedia – TheLuminor Aug 04 '15 at 07:15

score 3 · Answer 2 · answered Aug 04 '15 at 07:05

3

Move the span over the input and set the right padding of the input the size of the span: https://jsfiddle.net/d65wyzoj/1/

answered Aug 04 '15 at 07:05

Lucian

644
3
13

score 2 · Answer 3 · answered Aug 04 '15 at 07:06

Try this

.new
{
  position: absolute;
  padding: 10px;
  right: 0px;
  line-height: 10px;
}



 <div class="form-group ">
    <label class="control-label">
      <code>.inner-addon.<i>right</i>-addon</code>
    </label>
    <div class="inner-addon right-addon">
      <span class="new">@gmail.com</span>
      <input type="text" class="form-control" placeholder="Search" />
    </div>
  </div>

score 1 · Answer 4 · answered Aug 04 '15 at 07:16

This is the most Elegant Solution you can find.

http://jsfiddle.net/t9ySU/

<div class="input-container">
    <input type="text"/>
</div>

.input-container {
    position: relative;
    float: left;
}
.input-container:after {
    position: absolute;
    right: 0;
    top: 0;
    content: '@gmail.com';
}

How to add static text to an input box in bootstrap?

4 Answers4

Linked