スタイリング入力テキストCSS

Question

私は、画像の下のような入力テキストを作成しようとしています：

まず私はthisフィドルのようないくつかの助けを借りて、CSS3を使用。私はCSS3を使用しないようになった古いブラウザの問題のために。 は今、私はこのようなコード化：

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" /> 

入力-BG.pngこの画像です：

とhereは結果です。

1. 入力画像を右にスライスしましたか？
2. 入力に左の境界線の色があります。イメージのように入力をCSSでスタイルする必要はありますか？

Answer 1

ボーダー半径とボーダーをnoneに設定するだけで済みます。そして暗いものが左側にあるようにあなたのイメージを編集してください。

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

画像を使用して両端が異なる場合は、少なくとも2枚の画像が必要です。 "sliding doors input css"を検索してみてください。多分this topic on SOがお手伝いします（但し、in the webから百万もの他の例があり、Stackoverflowにあります）。

Answer 3

エッジを丸めるためにボーダー半径を追加する必要があります。しかしこれは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 
} 

画像をスライスすると、左のシャドウ部分を簡単に取得することができるため、背景に非常に広い画像が必要になります。あるいは、他の人が提案したスライドドアをしてください。