CSS text input style

Question

I am trying to create input as below. Picture:

At first I used CSS3 with some help, like this script. due to problems with older browsers, I decided not to use CSS3. Now I am encoded as follows:

input[type=text] { color: #979797; height: 28px; padding-left: 10px; text-decoration: none; background-image: url('Pictures/Input-BG.png'); background-repeat: repeat-x; } <input id="txtScrictAddress" value="Your Adress (required)" type="text" /> 

Input-BG.png is a picture:

and here is the result.

• Did I cut input images correctly?
• The input has a left border color. How should I insert the input into css, like an image?

Answer 1

You just need to set the radius of the border and the border to none. And edit your image so that the dark thing is also on the left side.

 input[type=text] { color: #979797; height: 28px; padding-left: 10px; text-decoration: none; background-image: url('http://i.stack.imgur.com/pbpVI.png'); background-repeat: repeat-x; border-radius: 5px; /*up to date browsers support this, but you can add prefixes if you want*/ border: 0; } 

http://jsfiddle.net/TGzng/8/

Answer 2

if you want to use images to get something where both ends are different from each other, you will need at least 2 images. try to find "sliding door entry css" . maybe this topic on SO helps you (but there are millions more other examples from the Internet and Stackoverflow ).

Answer 3

You need to add a border radius to round the borders. However, this will not work until IE8.

 input[type=text] { color: #979797; height: 28px; padding-left: 10px; text-decoration: none; background-image: url('http://i.stack.imgur.com/pbpVI.png'); background-repeat: repeat-x; border:1px solid #777; border-radius:5px } 

As for slicing images, a simple way to get the left shadow part means you need to have a very wide image for the background. Or make this sliding door that the other person suggested.