Question

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 the 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;  }

Answer 1

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 */
}