I'm trying to make a search bar that will look nice. What I did is, I made an image of an search bar and I'm adding the image to the back-ground of the input and I'm editing the place and the size that the font will appear.The only thing that I can't find a way to edit is the small 'x' button that appears when I'm using input type search.I want to move it a little bit left so it will fix my search bar image.
#search { width: 480px; height: 49px; border: 3px solid black; padding: 1px 0 0 48px; font-size: 22px; color: blue; background-image: url('images/search.jpg'); background-repeat: no-repeat; background-position: center; outline: 0;}<input id="search" name="Search" type="search" value="Search" />