Menu
Wondering if this is possible:
Let's say if I have a text input element that I want to use to input currencies. Probably I'd want a prefix before the text input to indicate what currency the user is performing his input in.
Hence, the HTML'd look something like:
US$ <input type="text" />
But let's say I want the "US$" above to appear as a prefix inside the text input itself, without the "US$" being part of the input string. Something like where "US$" is the background text of the text input. Of course, the text input would be indented to avoid clashing with the background text.
Any way of accomplishing this without the use of images or Javascript?
Thanks!
693
I didn't have time to try my solution in IE (leaving work now) but you can play around with this if you want: http://pastie.org/581472
Update: Took a quick look in IE6-8 and it didn't work in any of them. Not sure if it's cause of the minimal HTML5 document or something else, I'll take another look at it later today or tomorrow.
Update 2: Updated the code to work with FF 3.5, Opera 9, Safari 4, IE6-8 (and probably more and earlier versions, but that is not tested). Grab the updated code.
<!doctype html>
<title>Background text inside text input control</title>
<style>
form { position: relative; }
input { background: transparent; position: relative; text-indent: 28px; z-index: 2; }
span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; z-index: 1; }
</style>
<form action="" method="post">
<input type="text">
<span>US$</span>
</form>
Updated code:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Background text inside text input control</title>
<style>
form { position: relative; }
input { padding-left: 28px; }
span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; }
</style>
</head>
<body>
<form action="" method="post">
<input type="text">
<span>US$</span>
</form>
</body>
</html>
If you really wanted to, you could do the following:
1.) Start with a field being defined as follows:
<div class="moneyFieldHolder">
<input type="text" class="moneyField" />
</div>
2.) Create a background image of a textbox with US$ inside it:
----------------
|US$ |
----------------
3.) set up the CSS:
.moneyFieldHolder {
background: url(image.png) top left;
}
.moneyField {
border: 0px solid #FFFFFF;
margin-left: 4em;
}
And that's it...this is definitely a hacky solution and should only really be used if absolutely necessary. Also, this does -- of course -- require an image.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
