Windows XPのデフォルトのテキストボックスのスタイルを復元する - XP Textbox Styles.css

フォームのテキストボックス系の要素（input要素でtype属性がtextやpasswordやsearchの場合やtextarea要素など）は、CSSで背景色を指定するとなぜか枠線のスタイルまで変わってしまう。
それは背景色を指定した場合は初期状態として設定されているの枠線のスタイルが表示されるから。逆にいうと背景色を指定しなければ、枠線のスタイルは設定されているスタイルではなく「デフォルトの特別なスタイル」が適用される。

しかしこの「デフォルトの特別なスタイル」はブラウザによって違う。（OSによっても違う。）

そこで、Windows XPの場合の「デフォルトの特別なスタイル」をなるべく復元するようなCSSを書いてみた。

XP Textbox Styles.cssのサンプル

MITライセンスで。

@charset "UTF-8";
/**
 *  PHP-Manual.css
 *  @see       http://0-oo.net/sbox/css-small-box/xp-textbox-styles
 *  @version   0.1.0
 *  @copyright 2010 dgbadmin@gmail.com
 *  @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)
 *
 *  対応状況
 *  IE 8        ○
 *  IE 7        ○
 *  IE 6        selectとtextarea○ input△（classの指定が必要）
 *  Firefox 3.6 ○
 *  Safari 5    inputとtextarea○ select×（少し大きい） ※Windows版で確認
 *  Chrome 5    ○
 *  Opera 10.6  inputとtextarea○ select×（UIが違う）
 */
 
 
/*
 * 枠線の色は共通
 */
select, input[type="text"], input[type="password"] {
    border: solid 1px #7f9db9;
}
textarea {    /* 属性セレクタが使えないIE6でも有効になるよう上記とは別にする */
    border: solid 1px #7f9db9;
}
input.textbox {     /* IE6は属性セレクタが使えないのでclassによる指定が必要 */
    border: solid 1px #7f9db9;
}
 
 
/**
 * paddingはブラウザごとに違う
 */
 
/*
 * Opera
 */
input[type="text"], input[type="password"], textarea {
    padding: 2px;
}
 
/*
 * Firefox
 */
input[type="text"], input[type="password"], x:-moz-any-link {
    padding: 2px 1px;
}
textarea, x:-moz-any-link{
    padding: 1px;
}
 
/*
 * IE
 * ・IE7でFirefox用のpaddingが適用されるので、Firefoxより後ろに書いて上書きする
 */
input[type="text"], input[type="password"] {
    padding: 2px\9;
}
input.textbox { /* IE6は属性セレクタが使えないのでclassによる指定が必要 */
    _padding: 2px;  
}
textarea {
    padding: 2px\9;
}
 
/*
 * Safari, Chrome
 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="text"], input[type="password"]{
        padding: 2px 1px;
    }
}