ansaurus

Question

CSS for text background in text input element

Answer 1

+1 A:

No, not as far as I know.

Electro 2009-08-12 15:49:13

Answer 2

A:

i would think you could do this with an absolutely positioned div that has a transparent bg. alternatively, you might have some success intercepting every keystroke and updating what is displayed yourself.

Scott Evernden 2009-08-12 16:02:55

Answer 3

+2 A:

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.

Zack 2009-08-12 16:05:06

To add to the hack, you'd also need an onfocus event on the div so when it was clicked, focus was properly given to the input field.

Pat 2009-08-12 16:08:28

This is the solution used on Stack Overflow for the search box, for example. Take a look at the search box using Firebug at http://getfirebug.com/

Wesley 2009-08-12 16:09:37

yeah well, a b/g image works well enough for a search box, but a text input for currency will have far too many possible values to make it viable to create an image for each and every single currency in the world. So this solution wouldn't be practical for a currency scenario.but yeah, the hack is cool! :)

feicipet 2009-08-12 16:18:08

Answer 4

+4 A:

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>

Teddy Zetterlund 2009-08-12 16:10:38

Oh wow. This worked out of the box in Chrome (I run Chromium, the development version for Linux; not sure about the Windows version) and Firefox 3.5. May need some fine-tuning, but this looks like the best solution so far. Semantically speaking, it makes sense for the currency to be in its own tag too.

feicipet 2009-08-12 16:23:19

It'd need each text input to be wrapped in a <div> container, but that should be fine.

feicipet 2009-08-12 16:31:36

Alright, found out that the background text will not work if <td> is used as the container, but <span> and <div> both seems to work in FF/Chrome. Not sure about IE as I don't have a running browser to test with.

feicipet 2009-08-12 16:53:57

I think tables are a bit messy when it comes to positioning so you should probably stay with div, li or p for the container element.Anyways, I've updated the code and is now tested and works in the following browsers: Safari 4, Firefox 3.5, Opera 9, Internet Explorer 6-8 (probably works in earlier versions of safari, firefox and opera as well).I changed text-indent to padding-left and added in the rest of the HTML document (so that IE doesn't mess up).Grab the updated code: http://pastie.org/581636

Teddy Zetterlund 2009-08-12 18:13:27

ansaurus

tags:

views:

answers:

CSS for text background in text input element

related questions