input要素やtextarea要素などを使えばテキスト入力欄を作る(表示する)ことができます。これらの要素がどのように表示されるかは、何もスタイルシートを適用しない状態であれば環境次第です。立体感のないフラットな入力欄として表示されるかも知れませんし、立体的に陰の付いた入力欄として表示されるかも知れません。WindowsXP以降のIEやFirefoxで表示させた場合だと、枠線が淡い青色で1pxのフラットな入力欄として描かれます。しかし、それ以前のWindowsであれば枠線が2pxで立体的に見える入力欄として描かれます。どんな環境でも同じように見せたい場合は、スタイルシートでデザインを明示しておく方が良いでしょう。その際は、必要な箇所だけを装飾するのではなく、全体のデザインを一括して指定する方が無難です。

入力フォームの一部分だけを装飾すると、旧デザインがベースになる

例えば、スタイルシートを使ってテキスト入力欄の背景色を指定すると、枠線が「2pxで立体的に見える(従来の)入力欄」として描かれてしまいます。全部の入力欄に対して一括指定しているなら別に構わないかも知れませんが、一部の入力欄だけを対象にして装飾している場合は、入力欄によって枠線の太さが異なってしまい、見づらくなるかも知れません。例えば以下のようにです。（※下記は実際に表示しているわけではなく、キャプチャ画像です。）

こうなることを防ぐには、テキスト入力欄の背景色を指定する際には、枠線も合わせて指定しておけば良いでしょう。
そうすれば、以下のように揃って見えます。（※下記もキャプチャ画像です。）

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

しかし、

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

→ フォームを装飾するなら、すべてのフォームを装飾する。

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

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

フラットな入力欄に見せるスタイルシート

上記の装飾を実現するCSSソースは以下の通りです。

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

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

入力欄のデザインが項目によってちぐはぐだと分かりにくくなってしまいますから、入力欄を装飾する際にはすべての入力欄に対して装飾を指定しておくようにした方が良いでしょうね。

(更新日：2016年02月18日)