How do I make the label appear inside the input field?

looking at this site: http://www.gofundme.com/sign-up/ they have a nice 'amount' input where you can change the $ £ € symbol. I've had it explained to me (thanks guys开发者_StackOverflow) how they go about that with javascript. Apparently it changes the label of the input.

So my question is, how do they get their symbol (which is the fields label) inside the input field?

They have an ordinary <div> styled to look like a textbox, and a <label> followed by a borderless <input> inside of it.

You can see how it works using Firebug.

I think you are talking about placeholder use this:

<input type="text" placeholder="Type here" />

The approach they're taking on the side you give as an example is to wrap the label and input inside a div, style the div as if it were an input field. The label and input field simply sit next to each other inside that div.

Alternatively you could also absolutely position the label and add a padding-left to the input field, like this you won't need a fake div.

I'll give an example for the second option:

.holder {
  position: relative;
}

.holder label {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
}

.holder input {
  padding: 2px 2px 2px 25px;
}

<form>
  <div class="holder">
    <label>
                <img src="yourimagesrc" width="20" height="20" alt="Your Image" />
            </label>
    <input type="text" ... />
  </div>
</form>

Of course the px values are just for the example's sake and need to replaced with appropriate values for the given situation. Also, instead of adding the img inside the label you could also directly assign a background-image to the label.

There are always many different ways to approach a situation with css.

It isn't actually inside the input field. If you look at the source (I used the Chrome developer tools), you'll see the whole thing is a div, the label contains the currency symbol, and the actual text input field is next to it.

This is the code that they are using:

<div class="amt_box bg_white">
    <label class="currency-display">$</label>
    <input class="big-field" type="text" 
         tabindex="1" value="" name="Funds[goalamount]">
</div>

I would just copy it.