How to display an image in the right upper corner of an input box

I have an input box

<span class="arrowDate"><input type="text" value="<?php echo $inputValue; ?>" id="<?php echo $id; ?>" class="datePickBox"  /></span>

What I want to achieve is to add via css and image with and arrow in the right hand corner of the input box. If I change properties to the image, the properties of th开发者_StackOverflow中文版e input box should remain the same. Basically the image should be a type of overlay for the input box, but do not know how to do this.

.datePickBox{
        font-size: 0.9em;
        border: 1px solid #DEDEDE;
        width: 270px;
        position:relative;
        right:0px !important;
        padding-right:20px;
}

.arrowDate{ background:url('../images/arrow.png') no-repeat right center; border:1px solid #DEDEDE;  }

Give your <input> a transparent background so the background of the <span> can shine thru and remove the border, because the border comes from the <span> in your case;

.datePickBox {
   background: none;
   border: none;
}

But your text will be over the background image, if long enough, so you can additionaly add a right padding as large as the image is wide.

.datePickBox {
   background: none;
   border: none;
   padding-right: 20px; /* bg image width */
}

Given the mark-up:

<span><input type="text" id="textInput" name="textInput" />&rarr;</span>

I used the CSS:

span {
    display: block;
    width: 150px;
    height: 30px;
    position: relative;
    background-color: #ffa;
    text-align: right;
    overflow: hidden;
    border-radius: 1em;
    border: 1px solid #ccc;
    line-height: 30px;
    padding: 0 0.5em 0 0;
}

span > input {
    position: absolute;
    top: 0;
    left: 0;
    right: 2em;
    bottom: 0;
    background-color: transparent;
    border-radius: 1em 0 0 1em;
    border-width: 0;
    border-right: none;
    outline: none;
}

To give the following JS Fiddle demo.

It's worth noting that I explicitly chose to place the arrow alongside the input, instead of 'overlaying' it above the input. It's also possible to amend my answer from the a similar question to create a comparable layout with a submit button alongside the input.

Can't get the image to display within the input box, with overlay I mean floating above the input box

you won't be able to get it floating above the text with background-image.

One way to do this would be to place the image next to the input field, and using relative positioning to move it above it.

CSS:

.boximage { position: relative; left: -40px; z-index: 2 }

HTML:

<input type='text'><img class='boximage' src='image.gif'>

better use this

<span><input type='text' /><img src='datepicker.jpg' /></span>

change the css to meet your overlay.. remove the right border of the text box