web-doc-base
俺のWeb文書プロジェクトの親プロジェクトです
github / 目次 / 6. web-doc-base を拡張する為の技術情報 / 2. CSS をカスタムする為の情報

フォーム部品のスタイリング

📅

2003年から HTML を書いてます。

ogp用概要をここにも表示

工事中です。

デフォルトのボックスモデルとボックスモデルの制限

  • デフォルトの box-sizing : C or B
    • B は border-box, C は content-box です。
  • box-sizing の変更は可能か?
  • padding
ブラウザテキスト入力<textarea>ボタンチェックリスト
デフォルトbox-sizing変更paddingデフォルトbox-sizing変更paddingデフォルトbox-sizing変更paddingデフォルトbox-sizing変更paddingデフォルトbox-sizing変更padding
IE 5.5B×✔B×✔B×✔B×✔--×
IE 6~7C×✔C×✔C×✔C(*1)×✔--×
Opera 7~7.54u2C××B××C(*1)×✔C××--×
Opera 8~8.54B×(*2)C×✔(*3)C×✔C×(*2)--×
Opera 9~9.27C×✔C×✔C×✔(*4)C×(*2)--×
Opera 9.50~C✔✔B×✔B✔✔C×✔--✔(*4)
Firefox 0.6B✔✔B×✔B✔✔B✔✔B(*5)-✔
Firefox 1.0B✔✔C×✔B✔✔(*7)B✔✔B(*5)-✔
Firefox 1.3C✔✔C×✔B(*6)✔✔(*7)B✔✔B(*5)-✔
Firefox 1.6C✔✔C×✔B(*6)✔✔(*7)B✔×B(*5)-✔
Firefox 1.8C✔✔C×✔B(*6)✔✔(*7)B✔✔(*8)B(*5)-✔
Firefox 1.9C✔✔C×✔B(*6)✔✔(*7)B××C-✔
  1. 但しファイルのアップロードボタンは border-box
  2. 横方向だけ padding が増える
  3. アップロードボタンは横方向だけ padding が増える
  4. リストボックスは横方向だけ padding が増える
  5. 但し、リストボックスは content-box
  6. 但し、画像送信ボタンは content-box
  7. アップロードボタンは padding が変化しない
  8. border 無し