Html Put a fixed text on an input text
try this one might be helpful for you.
http://jsfiddle.net/pZLcg/
<div class="input-box">
<input value="" autofocus="autofocus"/>
<span class="unit">£</span>
</div>
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" />I know this question is already answered, but here is another way to do it.
I tested this code with..
Firefox 22
Google Chrome 28
Internet Explorer 10
Safari 5
Opera 15
#text_container {
padding: 1px;
/*To make sure that the input and the label will not overlap the border, If you remove this line it will not display correctly on Opera 15.0*/
border: 1px solid activeborder;
/*Create our fake border :D*/
}
#text_container>label {
color: activeborder;
background-color: white;
-webkit-touch-callout: none;
/*Make the label text unselectable*/
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#text_container>input {
border: none;
/*We have our fake border already :D*/
}<span id="text_container">
<!-- Don't break the following line to avoid any gaps between the label text and the input text -->
<label>http://www.</label><input type="text" />
</span>