※紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものも幾つか含まれています。
※紹介している内容で明らかに記述が不足しているものやもっとシンプルにできるというものがあれば、コメントなどで教えてもらえると嬉しいです。
フォーム周りで覚えておくと便利なCSS Snippets 目次
1. 各要素のデフォルトスタイルを削除
フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。
特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウザやデバイスでも同じように表示させたい時にはこれらが邪魔になってしまいます。
このデフォルトの見栄えを取り除きたいという時に便利なのがappearanceというプロパティで、下記のように使用することでデフォルトのスタイルを削除することができます。
CSS
input, button, textarea, select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
上記をそのまま使用すると記述した要素全てに適用されるので、リセットしたくない要素は指定から外す、もしくは属性セレクタなどを利用すれば特定の要素に指定しやすくなると思います。
また、かなりざっくりですがappearanceに加えて更に下記のように記述することでほとんどのスタイルを消すことができます。
CSS
input, button, textarea, select {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
実際の表示は以下で確認できます。
2. 属性セレクタを使う
例として下記のようなHTMLがあったとします。
HTML
<form>
<p><input type="text" size="40" /></p>
<p><input type="text" size="40" /></p>
<p><input type="text" size="40" /></p>
<p><input type="password" size="20" /></p>
<p>
<input type="radio" name="radio" value="foo" checked="checked" />foo
<input type="radio" name="radio" value="bar" />bar
<input type="radio" name="radio" value="baz" />baz
</p>
<p>
<input type="checkbox" name="checkbox" value="foo" checked="checked" />foo
<input type="checkbox" name="checkbox" value="bar" />bar
<input type="checkbox" name="checkbox" value="baz" />baz
</p>
<p><textarea cols="50" rows="10"></textarea></p>
<p>
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</p>
</form>
例えばinput type="text"のみwidthを広げたりpaddingを調整したいとなった場合は、そのままinput { property: value; }のように記述すると全てのinput要素に適用されてしまい、上記のようなHTMLを使用している場合はinput type="password"をはじめ、ラジオボタン、チェックボックス、送信・リセットのボタンなどにもスタイルが適用されてしまいます。
まだCSSを触り始めて間もなければ、それぞれのinput要素やその親となる要素（今回の場合はp要素）にidやclassを付けて指定すればと思われる方もいると思いますが、そこで便利なのが属性セレクタです。
属性セレクタとはその名の通り特定の属性を持つ要素を対象にするもので、これを使用することでわざわざidやclassを付けなくてもそれぞれに要素にのみスタイルを適用させることが可能になります。
先ほど例に出したinput type="text"のみに指定をしたい場合は、属性セレクタを使用して下記のように記述します。
CSS
input[type="text"] {
property: value;
}
このように記述することで、input要素で尚且つtype="text"の要素にのみスタイルを適用させることが可能になるので、ラジオボタンや送信ボタンなどは同じinput要素ですがスタイルは適用されないようにできます。
これを踏まえて以下のようにそれぞれ記述していけば、特にidやclassを付けなくとも、それぞれの要素に独自のスタイルを適用させることができます。
CSS
/* input type="password" のみ */
input[type="password"] {
property: value;
}
/* input type="radio" のみ */
input[type="radio"] {
property: value;
}
/* input type="checkbox" のみ */
input[type="checkbox"] {
property: value;
}
/* input type="reset" のみ */
input[type="reset"] {
property: value;
}
/* input type="submit" のみ */
input[type="submit"] {
property: value;
}
今回は属性セレクタの中からattr="value"という形のものだけを紹介しましたが、この他にも様々な指定方法ができて覚えておくと何かと便利です。
他の指定方法に興味ある方は以下で確認することができます。
3. フォーカス時のスタイルを変更する
inputやtextareaの要素にフォーカスした際の見た目はブラウザによって多少異なりますが、下記のように:focusという疑似クラスを使用すれば任意のスタイルを適用させることができ、異なるブラウザでも同じような見た目にすることができます。
CSS
input[type="text"],
textarea {
outline: none;
border: 1px solid #aaa;
-webkit-transition: all .3s;
transition: all .3s;
}
input[type="text"]:focus,
textarea:focus {
box-shadow: 0 0 7px #1abc9c;
border: 1px solid #1abc9c;
}
上記はinput type="text"とtextareaに対しての指定方法となりますが、input type="password"などのような他の要素にも適用させたいときは追記や属性セレクタを変更するなどしてください。
実際の表示は以下で確認できます。
4. フォーカス時に入力エリアを伸ばす
たまに見かけるフォーカス時に入力エリアが大きくなる動きをCSSで実装する方法です。
実装には下記のように記述します。
CSS
input[type="text"] {
width: 200px;
-webkit-transition: width .3s;
transition: width .3s;
}
input[type="text"]:focus {
width: 300px;
}
幅を変更したいときはwidth、アニメーション速度などを変更したい場合はtransitionをそれぞれ任意で変更してください。
実際の表示は以下で確認できます。
5. disabled状態の要素にスタイルを適用する
input要素にdisabled属性を記述することで選択や入力ができない状態にさせることができますが、この状態の時に任意のスタイルを適用させる方法です。
デフォルトでもそれっぽい見栄えに自動でしてくれますが、細かく指定したいという場合は下記のように:disabledという疑似クラスを使って記述をします。
CSS
:disabled {
background-color: #eee;
cursor: not-allowed;
}
上記のように記述するとdisabled属性が指定してある要素のスタイルを変更することが可能で、この記述をそのまま使用した場合は背景色がグレーになり、カーソルもcursor: not-allowed;を記述することで禁止カーソルが表示されるようになります。
上記でスタイルを変更できますがこのままだとdisabled属性が指定してある全ての要素に対して適用されてしまうので、一部に対して適用させたいという場合はクラスや属性セレクタを用いて指定してください。
例えばinput type="text"に対して属性セレクタと擬似クラスを組み合わせて記述する際には下記のようになります。
CSS
input[type="text"]:disabled {
property: value;
}
実際の表示は以下で確認できます。
その他の擬似クラス
上記で:focusと:disabledという擬似クラスを使ったものを紹介しましたが、フォーム周りで使う機会が多そうな擬似クラスは他にもあり、チェックボックスやラジオボタンがチェックされている時にスタイルを適用させたりできる:checkedやバリデーションで使える:valid:invalid:requiredなどがあります。
ブラウザによって対応・非対応があるので現状だとまだ何も考えずに使うというわけにはいきませんが、特に:checkedなどは非常に便利なので覚えておいて損はないと思います。
6. placeholder属性のカラーを変更する
placeholder属性を使用することでinput要素やtextarea要素に「〇〇を入力してください」という感じのヒントを表示させることができるのですが、そのカラーを任意のものに変更する方法です。
記述はブラウザ毎にする必要があり、それぞれ下記のように記述していきます。
CSS
/* Chrome */
::-webkit-input-placeholder {
color: #3498db;
}
/* Firefox */
::-moz-placeholder {
color: #3498db;
}
/* IE */
:-ms-input-placeholder {
color: #3498db;
}
上記をそのまま使用すると全てのinput要素やtextarea要素に適用されるので、input要素にのみ適用したい場合はinput::-webkit-input-placeholderという感じで記述したり、クラスや属性セレクタを用いるなどして指定してください。
ちなみに、ここではcolorのみの指定ですが、他にもbackground-colorやtext-shadowといったプロパティを使って装飾することもできます。
実際の表示は以下で確認できます。
7. IEのinput要素に出てくるマークを消去
これまでは表示されてなかったのですが、IE10以降からinput type="text"とinput type="password"へ入力すると画像のようなマークが表示されるようになり、それぞれマークを選択するとinput type="text"では入力内容の消去、input type="password"ではマスクの一時的解除ということができます。
機能としては良い機能だと思いますが、もちろんIE独自のもので他のブラウザでは表示されないので、他のブラウザと同様にこのマークが表示されないようにしたい場合は下記のように記述することでマークを非表示にできます。
CSS
/* text */
input::-ms-clear {
visibility: hidden;
}
/* password */
input::-ms-reveal {
visibility: hidden;
}
ここではともにvisibility: hidden;で非表示にしていますが、display: none;でも非表示にすることはできました。
（どちらが好ましいのかは正直わかりません...）
実際の表示は以下で確認できます。
8. textareaのリサイズ機能を制限する
ChromeやFirefoxではtextareaの大きさをユーザー側で自由にサイズ変更できるようになっているのですが、サイズ変更したことによって周りのレイアウトが大きく崩れてしまう可能性があります。
崩れると言っても閲覧しているユーザーにのみ起きる現象ですし、そこまで気にすることではないかもしれませんが、気になる人は下記のようにresizeというプロパティを使うことでリサイズ機能を制限することができます。
CSS
/* 横のみリサイズ可 */
textarea {
resize: horizontal;
}
/* 縦のみリサイズ可 */
textarea {
resize: vertical;
}
/* 縦横ともにリサイズ不可 */
textarea {
resize: none;
}
上記のようにresize: horizontal;を指定した場合は横のみリサイズが可能、resize: vertical;を指定した場合は縦のみリサイズが可能、縦横ともにリサイズ不可にしたい場合はresize: none;をそれぞれ記述することで実装できます。
また、リサイズの機能は残しつつ、極端に大きくしたり小さくしたりはできないようにしたい場合は、下記の様にwidthやheightを指定してあげれば実装できます。
CSS
/* リサイズの最小値と最大値を指定 */
textarea {
min-width: 250px;
max-width: 500px;
min-height: 100px;
max-height: 250px;
}
それぞれ、実際の表示は以下で確認できます。
9. 送信ボタンを画像にする
button要素を使うなどやり方はいろいろあると思いますが、ここではinput type="submit"に画像置換を使用して任意の画像を表示させる方法です。
画像置換といっても方法は幾つかあるので、今回は3パターンの方法をご紹介します。
以下のスタイルを適用させるHTMLはいずれもinput type="submit"を使用しています。
また、画像はこのようなものを使用し、通常時・hover時・active時の見栄えを表現したものを1枚の画像にしています。
font-size: 0
ボタンとして使いたい画像を背景画像で表示させ、color: transparent;とfont-size: 0;を使用して文字列を見えなくする方法です。
CSS
input[type="submit"] {
display: block;
width: 110px;
height: 38px;
padding: 0;
background: url(btn_submit.png) no-repeat 0 0;
border: none;
color: transparent;
font-size: 0;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover {
background-position: 0 -38px;
}
input[type="submit"]:active {
background-position: 0 -76px;
}
text-indent & white-space & overflow
画像置換のテクニックとしてtext-indent: -9999px;といった感じで文字列を飛ばす方法をご存知の方も多いと思いますが、こちらも同じようにtext-indentをwhite-spaceとoverflowと組み合わせて用いる方法です。
CSS
input[type="submit"] {
display: block;
width: 110px;
height: 38px;
padding: 0;
background: url(btn_submit.png) no-repeat 0 0;
border: none;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover {
background-position: 0 -38px;
}
input[type="submit"]:active {
background-position: 0 -76px;
}
ほとんどのブラウザは上記で問題なく表示されると思うのですが、Firefoxに関してはこのままだと完全に文字が隠れずに、少しだけ頭文字が見えるような感じになっています。
これはFirefox固有のpaddingやborderが設定されているために起きてしまう現象で、これらの値を変更したい場合は下記のように::-moz-focus-innerを使うことで変更することができます。
input[type="submit"]::-moz-focus-inner {
padding: 0;
border: none;
}
今回の例に限らず、Firefoxだけ表示が違うとか枠線が消えないなんてことがあったら、::-moz-focus-innerの値を変更することで解決することもあるので、覚えておくと良いと思います。
padding
こちらはheightの値を0にして、paddingに画像分の高さを設定することで表示させるというものになります。
今回はheightとpadding-topを組み合わせていますが、widthとpadding-leftみたいな組み合わせ方も可能です。
CSS
input[type="submit"] {
display: block;
width: 110px;
height: 0;
padding: 38px 0 0;
background: url(btn_submit.png) no-repeat 0 0;
border: none;
overflow: hidden;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover {
background-position: 0 -38px;
}
input[type="submit"]:active {
background-position: 0 -76px;
}
他にも画像置換のテクニックとしてline-heightやz-index使うようなものもありますが、個人的には画像置換をする場合は上記で紹介した「text-indent & white-space & overflow」をよく用いています。
いずれもほとんどのブラウザで意図した通りにはなってくれると思うのですが、例えばfont-size: 0の場合は一部のブラウザで文字列が完全に消えなかったり、他の方法に関しても他のスタイルと組み合わせた時に意図した形で表示してくれないということがあるので、状況に応じて使うという形をとっています。
それぞれ実際の表示は以下で確認できます。
10. CSSのみでツールチップを表示する
フォームに限らず様々なところで使用するものですが、ツールチップをCSSのみで実装する方法です。
実装にはHTMLとCSSをそれぞれ下記のように記述します。
HTML
<p>
<input type="text" />
<span class="error">この項目は必須項目となります。</span>
</p>
CSS
p {
position: relative;
}
.error {
position: absolute;
top: -3.5em;
left: 0;
padding: .5em 1em .4em;
background-color: #f66;
border: 1px solid #f00;
border-radius: 5px;
color: #fff;
}
.error:after,
.error:before {
content: '';
position: absolute;
top: 100%;
left: 15px;
border: solid transparent;
}
.error:after {
margin-left: 1px;
border-top-color: #f66;
border-width: 7px;
}
.error:before {
border-top-color: #f00;
border-width: 8px;
}
上記のように記述し、あとは.errorの要素を状況に応じて表示・非表示切り替えて使えば、CSSのみでツールチップを使ったエラー表示を実装できます。
カラーや吹き出し部分の表示位置はborderの各指定を任意のものにしていけば変更できますが、面倒な場合やよくわからない場合は「cssarrowplease」などのサイトを使って簡単に実装できます。
実際の表示は以下で確認できます。
11. ラジオボタンをCSSのみで装飾する
そこまで大幅に見た目を変えずに、ラジオボタンをCSSのみを使って装飾したサンプルです。
サンプルは2種類で、実装にはHTMLとCSSをそれぞれ下記のように記述します。
※HTMLは両方とも同じような記述を使用します。
HTML
<input type="radio" id="radio01" name="demo" /><label for="radio01">foo</label>
<input type="radio" id="radio02" name="demo" /><label for="radio02">bar</label>
<input type="radio" id="radio03" name="demo" /><label for="radio03">baz</label>
CSS
/* custom01 */
input[type="radio"] {
display: none;
}
label {
position: relative;
display: inline-block;
padding: 3px 3px 3px 20px;
cursor: pointer;
}
label::before {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 14px;
height: 14px;
margin-top: -8px;
background: #fff;
border: 1px solid #ccc;
border-radius: 100%;
}
input[type="radio"]:checked + label::after {
position: absolute;
content: '';
top: 50%;
left: 4px;
width: 8px;
height: 8px;
margin-top: -4px;
background: #3498db;
border-radius: 100%;
}
/* custom02 */
input[type="radio"] {
display: none;
}
label {
position: relative;
display: inline-block;
padding: 3px 3px 3px 20px;
cursor: pointer;
}
label::before,
label::after {
position: absolute;
content: '';
top: 50%;
border-radius: 100%;
-webkit-transition: all .2s;
transition: all .2s;
}
label::before {
left: 0;
width: 14px;
height: 14px;
margin-top: -8px;
background: #f3f3f3;
border: 1px solid #ccc;
}
label:hover::before {
background: #fff;
}
label::after {
opacity: 0;
left: 4px;
width: 8px;
height: 8px;
margin-top: -4px;
background: #3498db;
-webkit-transform: scale(2);
transform: scale(2);
}
input[type="radio"]:checked + label::before {
background: #fff;
border: 1px solid #3498db;
}
input[type="radio"]:checked + label::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
いずれもパッと見は同じようにシンプルなラジオボタンで、カスタム01はボタン部分を装飾、カスタム02はボタン部分の装飾に加えチェックなどにほんの少しアニメーションを付加したものになります。
ラジオボタンやチェックボックスはデフォルトでそのまま実装されているサイトも多いですが、今回のサンプルでブルーを用いているように、見た目はデフォルトと似た感じにしつつカラーリングを周りのデザインに合わせて変更することも容易にできるので、こういった細かい部分までとにかく凝りたい人は是非使ってみてください。
実際の表示は以下で確認できます。
12. チェックボックスをCSSのみで装飾する #1
先ほどのラジオボタンと同様、こちらはそこまで大幅に見た目を変えずにチェックボックスをCSSのみで装飾したサンプルです。
同じくサンプルは2種類で、実装にはHTMLとCSSをそれぞれ下記のように記述します。
※HTMLは両方とも同じような記述を使用します。
HTML
<input type="checkbox" id="checkbox01" name="demo" /><label for="checkbox01">foo</label>
<input type="checkbox" id="checkbox02" name="demo" /><label for="checkbox02">bar</label>
<input type="checkbox" id="checkbox03" name="demo" /><label for="checkbox03">baz</label>
CSS
/* custom01 */
input[type="checkbox"] {
display: none;
}
label {
position: relative;
display: inline-block;
padding: 3px 3px 3px 22px;
cursor: pointer;
}
label::before {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 14px;
height: 14px;
margin-top: -8px;
background: #fff;
border: 1px solid #ccc;
}
input[type="checkbox"]:checked + label::after {
position: absolute;
content: '';
top: 5px;
left: 3px;
width: 13px;
height: 5px;
border-left: 2px solid #3498db;
border-bottom: 2px solid #3498db;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* custom02 */
input[type="checkbox"] {
display: none;
}
label {
position: relative;
display: inline-block;
padding: 3px 3px 3px 22px;
cursor: pointer;
-webkit-transition: all .2s;
transition: all .2s;
}
label::before,
label::after {
position: absolute;
content: '';
-webkit-transition: all .2s;
transition: all .2s;
}
label::before {
top: 50%;
left: 0;
width: 14px;
height: 14px;
margin-top: -8px;
background: #f4f4f4;
border: 1px solid #ccc;
border-radius: 3px;
}
label::after {
opacity: 0;
top: 50%;
left: 3px;
width: 8px;
height: 4px;
margin-top: -4px;
border-left: 2px solid #3498db;
border-bottom: 2px solid #3498db;
-webkit-transform: rotate(-45deg) scale(.5);
transform: rotate(-45deg) scale(.5);
}
label:hover::before {
background: #fff;
}
input[type="checkbox"]:checked + label::before {
background: #fff;
border: 1px solid #3498db;
}
input[type="checkbox"]:checked + label::after {
opacity: 1;
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
}
カスタム01はチェックボックスを装飾、カスタム02はチェックボックスの装飾に加えチェック時などにほんの少しアニメーションを付加したものになり、チェックマーク部分も擬似要素にborderとtransform: rotateを用いてCSSのみで表現しています。
実際の表示は以下で確認できます。
13. チェックボックスをCSSのみで装飾する #2
同じくチェックボックスをCSSのみで装飾したものですが、見た目を大幅に変えてトグルボタンにしたもので、実装にはHTMLとCSSをそれぞれ下記のように記述します。
HTML
<input type="checkbox" id="demo01" checked />
<label for="demo01" data-on-label="On" data-off-label="Off"></label>
<input type="checkbox" id="demo02" />
<label for="demo02" data-on-label="Yes" data-off-label="No"></label>
CSS
/* common style */
input {
display: none;
}
input+label,
input+label::before,
input+label::after {
-webkit-transition: all .2s;
transition: all .2s;
}
input+label {
display: inline-block;
position: relative;
width: 100px;
height: 48px;
border-radius: 24px;
cursor: pointer;
}
input+label::before {
display: block;
content: attr(data-off-label);
position: absolute;
top: 14px;
right: 7px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 18px;
}
input+label::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 44px;
height: 44px;
background-color: #fff;
border-radius: 50%;
}
input:checked+label::before {
content: attr(data-on-label);
left: 7px;
right: auto;
color: #fff;
}
input:checked+label::after {
left: 54px;
background-color: #f7f7f7;
}
/* demo01 */
#demo01+label {
background-color: #eee;
}
#demo01+label::before {
color: #aaa;
}
#demo01:checked+label {
background-color: #3498db;
}
#demo01:checked+label::before {
color: #fff;
}
/* demo02 */
#demo02+label {
background-color: #e74c3c;
}
#demo02:checked+label {
background-color: #1abc9c;
}
labelの::after擬似要素で表現したボタンをチェック時にabsoluteとtransitionを使ってアニメーションで動くように設定し、「On」や「Yes」といったテキスト表示はHTMLでそれぞれlabel要素に記述をしたカスタムデータ属性の内容をcontentを使って表示させています。
実際の表示は以下で確認できます。
14. フォーカス時にラベルをアニメーションさせる
CSSのみでinput要素にフォーカスすると隣接しているlabel要素がアニメーションする動きを実装する方法です。
今回は3タイプの動きを紹介しますが、いずれもHTMLは下記のような記述を使用します。
HTML
<p>
<input type="text" id="demo" />
<label for="demo">label</label>
</p>
ラベルが上部に移動
input要素にフォーカスするとlabel要素がinput要素上にアニメーションするもので、実装にはCSSを下記のように記述します。
CSS
p {
position: relative;
}
input,
label {
-webkit-transition: all .2s;
transition: all .2s;
font-size: 15px;
}
input {
width: 300px;
padding: .5em .5em .5em 3.5em;
border: 1px solid #aaa;
background: #fff;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #333;
}
label {
position: absolute;
top: .7em;
left: .5em;
color: #aaa;
line-height: 1;
}
input:focus {
padding-left: .5em;
}
input:focus + label {
top: -1.5em;
}
ラベルが左端に移動＋表示向きを変更
input要素にフォーカスするとlabel要素がinput要素の左端にアニメーション付きで移動し、更にテキストの表示が変更されるものです。
実装にはCSSを下記のように記述します。
CSS
p {
position: relative;
}
input,
label {
-webkit-transition: all .2s;
transition: all .2s;
font-size: 15px;
}
input {
width: 300px;
padding: .5em .5em .5em 3.5em;
border: 1px solid #aaa;
background: #fff;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #333;
}
label {
position: absolute;
top: .7em;
left: .5em;
color: #aaa;
line-height: 1;
}
input:focus {
padding-left: 1.5em;
}
input:focus + label {
top: .75em;
left: -.5em;
-webkit-transform: rotate(-90deg) scale(.7);
transform: rotate(-90deg) scale(.7);
}
ツールチップに変化させる
input要素にフォーカスするとlabel要素がinput要素上にアニメーションし、更に装飾することでツールチップの見た目に変更させたものです。
実装にはCSSを下記のように記述します。
CSS
p {
position: relative;
}
input,
label {
-webkit-transition: all .2s;
transition: all .2s;
font-size: 15px;
}
input {
width: 300px;
padding: .5em .5em .5em 3.5em;
border: 1px solid #aaa;
background: #fff;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #333;
}
label {
position: absolute;
top: .7em;
left: .5em;
color: #aaa;
line-height: 1;
}
input:focus {
padding-left: .5em;
}
input:focus + label {
top: -2.5em;
left: 0;
padding: .4em .7em .45em;
border-radius: .2em;
background-color: #3498db;
color: #fff;
font-size: 14px;
}
input:focus + label::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: #3498db;
}
それぞれ実際の表示は以下で確認できます。
その他のオリジナルデザインやアニメーションのデモ
上記でラジオボタンの装飾やフォーカス時のラベルアニメーションの方法を紹介してきましたが、ここで紹介したものは本当に簡易的なもので、更に手を加える事でガラッと見た目を変えたり、面白いアニメーションをつけたりすることができます。
以下はいずれもフォーム周りで使われる要素をベースに作成されているデモやチュートリアルで、一部JavaScriptを使用しているものもありますが、見た目や動きのほとんどをCSSで実装していて非常に参考になります。
Switch Button #2
Radio Button
Toggle switch with checkbox:checked
Pure CSS toggle buttons
Clean Animated Input Labels
Text input love
Inspiration for Text Input Effects
Some More Inspiration for Text Input Effects
CSS Contact Form
Minimal Form Interface
Animated Checkboxes and Radio Buttons with SVG
Some :active & :focus effects
15. Chrome:オートコンプリート使用後の背景色を変更する
Chromeにあるオートコンプリート機能を使用した際に背景色が黄色に変更されるのですが、これを任意の背景色に変更する方法です。
手っ取り早いのはformやinput要素にautocomplete="off"と記述すればオートコンプリート機能が無効になるので、結果的に背景色が変更されるということもなくなるのですが、オートコンプリート機能は残しつつ背景色を任意のものに変更したいという場合は下記のように記述します。
CSS
input:-webkit-autofill {
box-shadow: 0 0 0 1000px #fff inset;
}
上記のように記述することで、オートコンプリート使用後でも背景色が黄色にならず指定した色（上記では白）になるのを確認できます。
単純にbackgroundで変更すればと思う方も多いと思いますが、backgroundでは!importantを使用しても変更することができません。
そこで上記のようにbox-shadowで背景色を見えなくするという形で、オートコンプリート機能使用後の背景色を任意のものにするというものになります。
ちなみに背景色だけでなくテキストカラーも変更したいという場合は、-webkit-text-fill-color: xxx;（xxxにはカラー名）という記述で変更可能です。
この方法は以下で紹介されているものです。