Using just text or images and CSS what's the best way to display a currency symbol in a textbox? (No JavaScript)

I would like to have a textbox with a currency symbol inside it.

I DO NOT want to use Javascript and i DO NOT want to have to deal with the symbol getting sent to the server. It is a cosmetic requirement and so would like to treat it as one.

So basically i would like to have it look like the box below.

[£ 0               ]

I have attempted this already, but it does not quite display correctly and the code looks messy (and is no doubt filled with cross browser issues). So before i slog away and fine tune it, I hoped someone on here would know a better way.

Code so far:

<div style="float:left;">&开发者_高级运维lt;%: Html.TextBoxFor(model => model.Amount, new { style = "padding-left: 20px;" })%></div><br />
<div style="float:left; margin-left: -190px;">£</div>

Many thanks,

Kohan

===

My own implementation of accepted answer:

input.icon_input
{
    position:relative; 
    padding:5px; 
    padding-left:25px; 
    width:200px;
}

.input_icon
{
    display:inline-block; 
    text-align:right; 
    width:22px; 
    font-weight:bold; 
    position: relative;
    left:-240px; 

}

<div>
    <%: Html.TextBoxFor(model => model.Amount, new { @class = "icon_input" })%>
    <span class="input_icon">£</span>
    <br />
</div>

Here, I did something similar a while ago.

http://vidasp.net/CSS-examples---numbered-input-boxes.html

(check out the source code)

You could try using £ or £ or £. These codes will display the symbol. "£" :)

I assume the issue that you just want the currency symbol to appear inside the visible border of the textbox?

Just use a div with a border and your currency symbol, then an input control with no border inside it, e.g.

    <div style="border: 1px solid black; height: 20px; padding:4px; width: 200px">
$ <asp:TextBox runat="server" Width="180px" BorderStyle="None"></asp:TextBox></div>

(I think you are using .net though I'm not sure what <%: is, guessing a typo!)