input要素で作るテキスト入力欄は、WindowsXP上のIEやFirefoxなどで表示させると、枠線が淡い青色で1pxのフラットな入力欄として描かれます。

しかし、スタイルシートを使って背景色を指定すると、枠線は2pxで立体的に見える（従来の）入力欄として描かれてしまいます。全部の入力欄がそうであれば別に構わないかも知れませんが、入力欄によって枠線の太さが異なるのは、整っていなくて見づらいかも知れません。
例えば以下のように。（※下記はキャプチャ画像）

こうなることを防ぐには、テキスト入力欄を装飾する際には、枠線も合わせて装飾しておけば良いでしょう。
例えば、以下のように。（※下記もキャプチャ画像）

WindowsXPでのテキスト入力欄などに使われる枠線色は「#7f9db9」なので、その色で1pxの枠線を引いています。こうすれば、WindowsXP上のIEやFirefoxなどで、「装飾していない入力欄」と「装飾した入力欄」の見栄えが大きく異なってしまうことを防げます。

しかし。

そのままでは、WindowsXP以外のOSで閲覧した場合や、WindowsXP上でもクラシックスタイルで表示させている場合や、フラットなデザインにならないブラウザで閲覧している場合には、おかしくなってしまいます。
それを防ぐには、次のように考えます。

→ フォームを装飾するなら、全部のフォームを装飾する

つまり、「デフォルトの表示でいいや。」と思っていた部分も、とりあえず装飾してしまうということです。WindowsXPのデフォルトっぽい装飾に合わせたいのなら、そういう装飾になるようスタイルを書いてしまいます。
例えば、以下のように。（※以下は画像ではなく、実際にテキスト入力欄を作っています。）

こうすると、どの環境で見ても入力欄の見栄えが揃って見えるでしょう。
まあ、WindowsXP以外のOSで閲覧しても、WindowsXPっぽい装飾で統一されることにはなりますが。(^_^;)

上記の装飾を実現するスタイルシートは以下の通りです。

input.default {
   background-color: #ffffff; /* 背景は白 */
   border: 1px solid #7f9db9; /* 枠線は淡い青色 */
}
input.design {
   background-color: #ffffcc; /* 背景は淡い黄色 */
   border: 1px solid #7f9db9; /* 枠線は淡い青色 */
}

input要素に対して、背景色と枠線（の色・太さ・種類）を指定しています。
ちなみに、テキスト入力欄の枠線色をいろいろ変えてみると以下のような感じに見えます。