[CSS]フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート -FormHack
Post on:2015年6月9日
sponsorsr
テキストボックス、テキストエリア、セレクトメニュー、チェックボックス、ラジオボタンなど、フォームで使うエレメントの各ブラウザでの相違を整え、幅、高さ、ボーダー、角丸などのスタイルを簡単にカスタマイズして、各ブラウザで美しく表示させるスタイルシートを紹介します。
FormHackのデモ
デモではフォームで使用する各エレメントが各ブラウザで確認できます。
※キャプチャは、Chrome for OS X
デモページ: テキストボックス
デモページ: チェックボックス、ラジオボタン
デモページ: テキストエリア
デモページ: セレクトメニュー
デモページ: ボタン
デモページ: フィールドセット
FormHackの使い方
FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。
カスタマイズは、Sassファイルの上部にまとめられています。
[css]
/* 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
[/css]
sponsors
