Placing static text at the end of an input field using HTML

Question

What I'm trying to do is place a static piece of text at the end of a input field. Not a placeholder, the idea is to have something like "@gmail.com" at the end of an input element field using HTML and CSS. My question is how could this be accomplished? I got the idea from the bootstrap validation states icons.

For example the input field would look like..

enter image description here

I hope this makes sense.. If you have any questions feel free to ask.

This text should stay static as the user types, which is what seperates it from a input field.

Here's some code that I have:

<form id="loginForm">
    <fieldset>
        <legend>Login</legend>
        <div class="form-group">
            <input id="usernameField" class="loginField form-control" name="username" type="text" placeholder="john.doe" required>
        </div>
        <br>
        <div class="form-group">
            <input id="passwordField" class="loginField form-control" name="password" type="password" placeholder="password" required>
        </div>
        <br>
        <span class="visible-lg">
            <button class="btn btn-danger loginBtn"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
        </span>
        <span class="hidden-lg">
            <button class="btn btn-danger loginBtn btn-large"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
        </span>
        <br>
    </fieldset>
</form>

My css:

.loginSpinner{
    display: none !important;
}

#badLogin{
    display: none;
}

#badRequest{
    display: none;
}

#createAccountForm{
    display: none;
}

.createSpinner{
    display: none !important;
}

#forgotPassword{
    display: none;
    color: red;
}

#usernameField:before{
    content:"@gmail.com";
    background-color:yellow;
    color:red;
    font-weight:bold;
}

JSFiddle: http://jsfiddle.net/UMBRd/

What about some CSS trickery? Use a `:before` with `content: '@gmail.com'` — luk3thomas, Apr 08 '14 at 15:49
@luk3thomas that CSS didn't seem to work :\ Here's my jsfiddle: http://jsfiddle.net/UMBRd/ — ryandawkins, Apr 08 '14 at 15:55

score 4 · Accepted Answer · edited May 23 '17 at 12:00

Here's some stuff to get you going, essentially you'll need to wrap the input in a div and adjust it's width to be the same as the input's (I did this by floating the div, but there are other ways). This will give you a coordinate system to place a pseudo-element in with your desired text.

HTML

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

CSS

.input-container {
    position: relative;
    float: left;
}

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

See this fiddle.

Note, the pure CSS way with pseudo-elements won't work as discussed in this post.

score 0 · Answer 2 · answered Apr 08 '14 at 16:04

The only thing I can think of would be to use absolute and relative positioning to overlay the input on top of the span. It's not perfect and I had to play around with the line-height a bit, but this might be enough to get you started:

HTML

<div>
    <span>@gmail.com</span>
    <input type="text" />
</div>

CSS

div {
    position: relative;
}
span {
    display: inline-block;
    width: 200px;
    position: relative;
    line-height:95px;
    text-align:right;
}
input {
    position: absolute;
    left: 10px;
    top: 35px;
    background-color: transparent;
    width:200px;
    height: 20px;
}

http://jsfiddle.net/pemep/

Placing static text at the end of an input field using HTML

2 Answers2

HTML

CSS

Linked