[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack

テキストボックス、テキストエリア、セレクトメニュー、チェックボックス、ラジオボタンなど、フォームで使うエレメントの各ブラウザでの相違を整え、幅、高さ、ボーダー、角丸などのスタイルを簡単にカスタマイズして、各ブラウザで美しく表示させるスタイルシートを紹介します。

FormHack
FormHack -GitHub

• FormHackのデモ
• FormHackの使い方

FormHackのデモ

デモページ

デモではフォームで使用する各エレメントが各ブラウザで確認できます。
※キャプチャは、Chrome for OS X

デモページ: テキストボックス

デモページ: チェックボックス、ラジオボタン

デモページ: テキストエリア

デモページ: セレクトメニュー

デモページ: ボタン

デモページ: フィールドセット

FormHackの使い方

FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。
カスタマイズは、Sassファイルの上部にまとめられています。

/* FormHack v1.0.0 (formhack.io) */

// Config -----------------------------

// Font
$fh-font-family: 'Raleway', sans-serif
$fh-font-size: 16px
$fh-font-color: rgb(40, 40, 40)

// Borders
$fh-border-radius: 5px
$fh-border-width: 1px
$fh-border-style: solid
$fh-border-color: rgb(200, 200, 200)

// Inputs, Textareas, Select, Option
$fh-input-height: 40px
$fh-input-width: 100%
$fh-input-max-width: 400px
$fh-input-bg-color: #fff
$fh-focus-bg-color: rgb(220, 220, 220)
$fh-focus-border-color: $fh-border-color
$fh-focus-font-color: $fh-font-color

// Select Vendor Styling
$fh-allow-vendor-styling: true

// Fieldset & Legend Styling
$fh-fieldset-bare: false

// Buttons & Input Submits
$fh-button-height: 40px
$fh-button-width: 100%
$fh-button-max-width: 200px
$fh-button-font-color: $fh-font-color
$fh-button-bg-color: $fh-focus-bg-color
$fh-button-hover-bg-color: $fh-border-color
$fh-button-hover-font-color: $fh-font-color

// Layout
$fh-centered: false
$fh-display: block


// Center/Left-Aligned Layout
=center-layout
	@if $fh-centered == true
		margin: 10px auto
		text-align: center
	@else
		margin: 10px 0