Put Fixed Text on an Input Text Box

Put fixed text on an input text box

If you want to fix this with only an input element you can use an inline svg background.

http://codepen.io/anon/pen/pJoBya

To make this work in Internet Explorer you need encodeURIComponent the SVG image
http://pressbin.com/tools/urlencode_urldecode/

input {  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><text x="5" y="19" style="font: bold 16px Arial;">Age:</text></svg>') no-repeat;  border: 1px solid #555;  box-sizing: border-box;  font: 16px "Arial";  height: 30px;  padding-left: 50px;  width: 300px;}

<input type="text" />

Fixed text inside an input

The way I would do it is add the text after the input, add a position: relative; on the Text you want to include inside the input and then adjust how further to the left or right the text is, using left or right. In this case I used left: -50px;. Run the snippet and see if it's how you want it to be.

div{
display: flex;
}
p{
position: relative;
left:-50px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
      <div>
        <input placeholder="Placeholder"><p>Text</p>
      </div>
  </body>
</html>

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

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.

How to add static text inside an input form

HTML

<label for="subdomain">Subdomain:</label>
<input type="text" placeholder="ExampleDomain" id="subdomain" />
<input type="text" id="subdomaintwo" value=".domain.com" disabled/>

CSS

input[type="text"]#subdomaintwo{
    -webkit-appearance: none!important;
    color: red;
    text-align: right;
    width: 75px;
    border: 1px solid gray;
    border-left: 0px;
    margin: 0 0 0 -7px;
    background: white;
}
input[type="text"]#subdomain{
    -webkit-appearance: none!important;
    border: 1px solid gray;
    border-right: 0px;
    outline: none;
}

JS Fiddle for this

HTML5: How do you place a fixed Text Input over a centering canvas?

I found a solution that works: http://jsfiddle.net/FV2NL/

<div id="container">
    <canvas id="canvas" width=800 height=600></canvas>
        <div id="menu">
            <button id="button1" type="button">Start</button>
            <button id="button2" type="button">Options</button>
            <button id="button3" type="button">High Scores</button>
        </div>
</div>
</body>

Everything has to be inside of a div group that has relative positioning and is centered with margin: 0 auto;. The canvas should have absolute positioning and top: 0; left: 0;. The text inputs are absolute and put inside of a relative div.

This is from another StackOverflow page here:

Buttons centered over canvas

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

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>

Put Fixed Text on an Input Text Box