Stylizacja tekstu wejściowego CSS

Question

Próbuję utworzyć tekst wejściowy jak poniżej Image:

Najpierw użyłem CSS3 z jakąś pomoc jak this skrzypcach. z powodu problemów ze starszymi przeglądarkami sięgnąłem, aby nie używać CSS3. Teraz kodowane tak:

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 jest ten obraz:

i here jest wynik.

1. Czy wycinam obraz wejściowy w prawo?
2. Wejście ma kolor lewej krawędzi, Jak powinien wyglądać styl wejściowy w css jak obraz?

Answer 1

Wystarczy ustawić promień obramowania i granicę na brak. I edytuj swój obraz, aby ciemna rzecz była również po lewej stronie.

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

Jeśli chcesz użyć obrazów, aby uzyskać coś, gdzie oba końce się różnią, będziesz potrzebował co najmniej 2 obrazów, aby to uzyskać. spróbuj wyszukać "sliding doors input css". może this topic on SO ci pomoże (ale istnieje milion innych przykładów na in the web i na Stackoverflow).

Answer 3

Musisz dodać promień obramowania, aby zaokrąglić krawędzie. To jednak nie zadziała przed 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 
} 

Jeśli chodzi o krojenie obrazu, łatwy sposób uzyskania części z lewego cienia oznacza, że ​​trzeba mieć bardzo szeroki obraz w tle. Czy te drzwi przesuwne są czymś, co zasugerowała druga osoba.