Styling input text CSS

Question

I am trying to create input text like below Image :
enter image description here
First I used CSS3 with some help like this fiddle . because of problems with old browsers I reached to don't use CSS3. Now I coded like this :

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 this image :
enter image description here
and here is the result.

Did I slice input image right ?
Input has a left border color , How should style the input in css like the image?

The image is good, add border: 0; to disable the default border style. — kapex
– kapex, Commented Aug 23, 2011 at 6:22
@Kapap Thanks, What about shadow on the left side of Input ? — Shahin
– Shahin, Commented Aug 23, 2011 at 6:30

Kyle · Accepted Answer · 2011-08-23 06:23:07Z

18

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

input[type=text]
{
    color: #979797;
    height: 28px;
    padding-left: 10px;
    text-decoration: none;
    background-image: url('https://i.sstatic.net/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/

answered Aug 23, 2011 at 6:23

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shahin Over a year ago

Thank you. It seems better than my code but I think still your sample has small different with Image that I putted. I mean the small shadow on the left of Input.

Kyle Over a year ago

I used the image you supplied, the image needs to be edited to include the left part of the shadow.

Community · Accepted Answer · 2017-05-23 11:46:46Z

1

if you want to use images to get something where both ends differ, you will at least need 2 images to get that. try to search for "sliding doors input css". maybe this topic on SO helps you out (but there are a million other examples out in the web and on Stackoverflow).

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Aug 23, 2011 at 6:20

oezi

51.9k10 gold badges102 silver badges119 bronze badges

1 Comment

Shahin Over a year ago

Thank you. So you meant I should use two images , one for left and one for background , right?

mnsr · Accepted Answer · 2011-08-23 06:22:52Z

0

You need to add a border-radius to round the edges. This won't work pre-IE8 though.

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

As for image slicing, easy way to get the left shadow part means you need to have a very wide image for the background. Or do that sliding doors thing the other person suggested.

answered Aug 23, 2011 at 6:22

mnsr

12.4k4 gold badges55 silver badges80 bronze badges

Collectives™ on Stack Overflow

Styling input text CSS

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related