フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。
全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。

紹介している内容はブラウザ(特にIE9以下)によっては使用できないものや表示確認ができないものもいくつか含まれています。

各要素のデフォルトスタイルを削除

各要素のデフォルトスタイルとスタイルリセット後の比較イメージ

フォームで使用するinputtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。
特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウザやデバイスでも同じように表示させたいときにはこれらが邪魔になってしまいます。
このデフォルトの見栄えを取り除きたいという時に便利なのがappearanceというプロパティで、下記のように使用することでデフォルトのスタイルを削除することができます。

input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

上記をそのまま使用すると記述した要素全てに適用されるので、リセットしたくない要素は指定から外す、もしくは属性セレクタなどを利用すれば特定の要素に指定しやすくなると思います。
また、かなりざっくりですがappearanceに加えて更に下記のように記述することでほとんどのスタイルを消すことができます。

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;
}

属性セレクタを使う

例として下記のような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"のみスタイル調整したいとなった場合は、そのままinput { property: value; }のように記述すると全てのinput要素に適用されてしまい、上記のようなHTMLを使用している場合はinput type="password"をはじめ、ラジオボタン、チェックボックス、送信・リセットのボタンなどにもスタイルが適用されてしまいます。

まだCSSを触り始めて間もなければ、それぞれのinput要素やその親となる要素(今回の場合はp要素)にidやclassを付けて指定すればと思われる方もいると思いますが、そこで便利なのが属性セレクタです。
属性セレクタとはその名の通り特定の属性を持つ要素を対象にするもので、これを使用することでわざわざidやclassを付けなくてもそれぞれに要素にのみスタイルを適用させることが可能になります。

先ほど例に出したinput type="text"のみに指定をしたい場合は、属性セレクタを使用して下記のように記述します。

input[type="text"] {
  property: value;
}

このように記述することで、input要素で尚且つtype="text"の要素にのみスタイルを適用させることが可能になるので、ラジオボタンや送信ボタンなどは同じinput要素ですがスタイルは適用されないようにできます。

これを踏まえて以下のようにそれぞれ記述していけば、特にidやclassを付けなくとも、それぞれの要素に独自のスタイルを適用させることができます。

/* 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"という形のものだけを紹介しましたが、この他にも様々な指定方法ができて覚えておくと何かと便利です。
他の指定方法に興味ある方は以下で確認することができます。

フォーカス時のスタイルを変更する

デフォルトのフォーカスとカスタマイズ後のフォーカスの見栄え比較イメージ

inputtextareaの要素にフォーカスした際の見た目はブラウザによって多少異なりますが、下記のように:focusという疑似クラスを使用すれば任意のスタイルを適用させることができ、異なるブラウザでも同じような見た目にすることができます。

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"などのような他の要素にも適用させたいときは追記や属性セレクタを変更するなどしてください。

実際の表示は以下で確認できます。

フォーカス時に入力エリアを伸ばす

たまに見かけるフォーカス時に入力エリアが大きくなる動きをCSSで実装する方法です。
実装には下記のように記述します。

input[type="text"] {
  width: 200px;
  -webkit-transition: width .3s;
  transition: width .3s;
}
input[type="text"]:focus {
  width: 300px;
}

幅を変更したいときはwidth、アニメーション速度などを変更したい場合はtransitionをそれぞれ任意で変更してください。

実際の表示は以下で確認できます。

disabled状態の要素にスタイルを適用する

input要素にdisabled属性を記述することで選択や入力ができない状態にさせることができますが、この状態の時に任意のスタイルを適用させる方法です。
デフォルトでもそれっぽい見栄えに自動でしてくれますが、細かく指定したいという場合は下記のように:disabledという疑似クラスを使って記述をします。

:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

上記のように記述するとdisabled属性が指定してある要素のスタイルを変更することが可能で、この記述をそのまま使用した場合は背景色がグレーになり、カーソルもcursor: not-allowed;を記述することで禁止カーソルが表示されるようになります。

上記でスタイルを変更できますがこのままだとdisabled属性が指定してある全ての要素に対して適用されてしまうので、一部に対して適用させたいという場合はクラスや属性セレクタを用いて指定してください。
例えばinput type="text"に対して属性セレクタと擬似クラスを組み合わせて記述する際には下記のようになります。

input[type="text"]:disabled {
  property: value;
}

実際の表示は以下で確認できます。

 

その他の擬似クラス

上で:focus:disabledという擬似クラスを使ったものを紹介しましたが、フォーム周りで使う機会が多そうな擬似クラスは他にもあり、チェックボックスやラジオボタンがチェックされている時にスタイルを適用させたりできる:checkedやバリデーションで使える:valid, :invalid, :requiredなどがあります。
ブラウザによって対応・非対応があるので現状だとまだ何も考えずに使うというわけにはいきませんが、特に:checkedなどは非常に便利なので覚えておいて損はないと思います。

placeholder属性のカラーを変更する

placeholder属性を使用することでinput要素やtextarea要素に「〇〇を入力してください」という感じのヒントを表示させることができるのですが、そのカラーを任意のものに変更する方法です。
記述はブラウザ毎にする必要があり、それぞれ下記のように記述していきます。

/* 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-colortext-shadowといったプロパティを使って装飾することもできます。

実際の表示は以下で確認できます。

IEのinput要素に出てくるマークを消去

input要素に出てくるマークの表示イメージ

これまでは表示されてなかったのですが、IE10以降からinput type="text"input type="password"へ入力すると画像のようなマークが表示されるようになり、それぞれマークを選択するとinput type="text"では入力内容の消去、input type="password"ではマスクの一時的解除ということができます。
機能としては良い機能だと思いますが、もちろんIE独自のもので他のブラウザでは表示されないので、他のブラウザと同様にこのマークが表示されないようにしたい場合は下記のように記述することでマークを非表示にできます。

/* text */
input::-ms-clear {
  visibility: hidden;
}

/* password */
input::-ms-reveal {
  visibility: hidden;
}

ここではともにvisibility: hidden;で非表示にしていますが、display: none;でも非表示にすることはできました。

実際の表示は以下で確認できます。

textareaのリサイズ機能を制限する

ChromeやFirefoxではtextareaの大きさをユーザー側で自由にサイズ変更できるようになっているのですが、サイズ変更したことによって周りのレイアウトが大きく崩れてしまう可能性があります。
崩れると言っても閲覧しているユーザーにのみ起きる現象ですし、そこまで気にすることではないかもしれませんが、気になる人は下記のようにresizeというプロパティを使うことでリサイズ機能を制限することができます。

/* 横のみリサイズ可 */
textarea {
  resize: horizontal;
}

/* 縦のみリサイズ可 */
textarea {
  resize: vertical;
}

/* 縦横ともにリサイズ不可 */
textarea {
  resize: none;
}

上記のようにresize: horizontal;を指定した場合は横のみリサイズが可能、resize: vertical;を指定した場合は縦のみリサイズが可能、縦横ともにリサイズ不可にしたい場合はresize: none;をそれぞれ記述することで実装できます。
また、リサイズの機能は残しつつ極端に大きくしたり小さくしたりはできないようにしたい場合は、下記の様にwidth, heightを指定してあげれば実装できます。

/* リサイズの最小値と最大値を指定 */
textarea {
  min-width: 250px;
  max-width: 500px;
  min-height: 100px;
  max-height: 250px;
}

それぞれ、実際の表示は以下で確認できます。

送信ボタンを画像にする

button要素を使うなどやり方はいろいろあると思いますが、ここではinput type="submit"に画像置換を使用して任意の画像を表示させる方法です。
画像置換といっても方法はいくつかあるので、今回は3パターンの方法をご紹介します。

使用する送信ボタンイメージ

以下のスタイルを適用させるHTMLはいずれもinput type="submit"を使用し、このように通常時・hover時・active時の見栄えを表現したものを1枚の画像を使用していきます。

font-size: 0

ボタンとして使いたい画像を背景画像で表示させ、color: transparent;font-size: 0;を使用して文字列を見えなくする方法です。

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-indentwhite-spaceoverflowと組み合わせて用いる方法です。

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固有のpaddingborderが設定されているために起きてしまう現象で、これらの値を変更したい場合は下記のように::-moz-focus-innerを使うことで変更することができます。

input[type="submit"]::-moz-focus-inner {
  padding: 0;
  border: none;
}

今回の例に限らず、Firefoxだけ表示が違うとか枠線が消えないなんてことがあったら::-moz-focus-innerの値を変更することで解決することもあるので、覚えておいて損はないです。

padding

こちらはheightの値を0にして、paddingに画像分の高さを設定することで表示させるというものになります。
今回はheightpadding-topを組み合わせていますが、widthpadding-leftといった組み合わせ方も可能です。

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-heightz-indexを使うものもありますが、個人的には画像置換をする場合は上で紹介した「text-indent & white-space & overflow」をよく用いています。
いずれもほとんどのブラウザで意図した見栄えになってくれると思うのですが、例えばfont-size: 0の場合は一部ブラウザで文字列が完全に消えなかったり、他の方法に関しても他のスタイルと組み合わせたときに何らかの不具合が出ることもなくはないので、その場合は状況に応じて使うという形をとっています。

それぞれ実際の表示は以下で確認できます。

CSSのみでツールチップを表示する

CSSのみで作成したツールチップ表示イメージ

フォームに限らず様々なところで使用するものですが、ツールチップをCSSのみで実装する方法です。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<p>
  <input type="text" />
  <span class="error">この項目は必須項目となります。</span>
</p>
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の各指定を任意のものにしていけば変更できますが、面倒な場合やよくわからない場合は「CSS Arrow Please」などのサイトを使って簡単に実装できます。

実際の表示は以下で確認できます。

ラジオボタンをCSSのみで装飾する

CSSのみで装飾したラジオボタン表示イメージ

そこまで大幅に見た目を変えずに、ラジオボタンをCSSのみを使って装飾したサンプルです。
サンプルは2種類で、HTMLは同じものを利用してCSSをそれぞれ下記のように記述します。

<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>
/* 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はボタン部分の装飾に加えチェックなどにほんの少しアニメーションを付加したものになります。

ラジオボタンやチェックボックスはデフォルトでそのまま実装されているサイトも多いですが、今回のサンプルでブルーを用いているように、見た目はデフォルトと似た感じにしつつカラーリングを周りのデザインに合わせて変更することも容易にできるので、こういった細かい部分までとにかく凝りたい人は是非使ってみてください。

実際の表示は以下で確認できます。

チェックボックスをCSSのみで装飾する #1

CSSのみで装飾したチェックボックス表示イメージ #1

先ほどのラジオボタンと同様、こちらはそこまで大幅に見た目を変えずにチェックボックスをCSSのみで装飾したサンプルです。
同じくサンプルは2種類で、HTMLは同じものを利用してCSSをそれぞれ下記のように記述します。

<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>
/* 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はチェックボックスの装飾に加えチェック時などにほんの少しアニメーションを付加したものになり、チェックマーク部分も擬似要素にbordertransform: rotateを用いてCSSのみで表現しています。

実際の表示は以下で確認できます。

チェックボックスをCSSのみで装飾する #2

CSSのみで装飾したチェックボックス表示イメージ #2

同じくチェックボックスをCSSのみで装飾したものですが、見た目を大幅に変えてトグルボタンにしたもので、実装にはHTMLとCSSをそれぞれ下記のように記述します。

<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>
/* 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擬似要素で表現したボタンをチェック時にabsolutetransitionを使ってアニメーションで動くように設定し、「On」や「Yes」といったテキスト表示はHTMLでそれぞれlabel要素に記述をしたカスタムデータ属性の内容をcontentを使って表示させています。

実際の表示は以下で確認できます。

フォーカス時にラベルをアニメーションさせる

CSSのみでinput要素にフォーカスすると隣接しているlabel要素がアニメーションする動きを実装する方法です。
今回は3タイプの動きを紹介しますが、いずれもHTMLは下記のような記述を使用します。

<p>
  <input type="text" id="demo" />
  <label for="demo">label</label>
</p>

ラベルが上部に移動

フォーカス時のラベル移動のイメージ

input要素にフォーカスするとlabel要素がinput要素上にアニメーションするもので、実装には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を下記のように記述します。

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を下記のように記述します。

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

Switch Button #2

Radio Button

Radio Button

Toggle switch with checkbox:checked

Toggle switch with checkbox:checked

Pure CSS toggle buttons

Pure CSS toggle buttons

Clean Animated Input Labels

Clean Animated Input Labels

Text input love

Text input love

Inspiration for Text Input Effects

Inspiration for Text Input Effects

Some More Inspiration for Text Input Effects

Some More Inspiration for Text Input Effects

CSS Contact Form

CSS Contact Form

Minimal Form Interface

Minimal Form Interface

Animated Checkboxes and Radio Buttons with SVG

Animated Checkboxes and Radio Buttons with SVG

Some :active & :focus effects

Some :active & :focus effects

Chrome:オートコンプリート使用後の背景色を変更する

Chrome:オートコンプリート適用時の表示イメージ

Chromeにあるオートコンプリート機能を使用した際に背景色が黄色に変更されるのですが、これを任意の背景色に変更する方法です。

手っ取り早いのはforminput要素にautocomplete="off"と記述すればオートコンプリート機能が無効になるので、結果的に背景色が変更されるということもなくなるのですが、オートコンプリート機能は残しつつ背景色を任意のものに変更したいという場合は下記のように記述します。

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fff inset;
}

上記のように記述することで、オートコンプリート使用後でも背景色が黄色にならず指定した色(上記では白)になるのを確認できます。
単純にbackgroundで変更すればと思う方も多いと思いますが、backgroundでは!importantを使用しても変更することができません。

そこで上記のようにbox-shadowで背景色を見えなくするという形で、オートコンプリート機能使用後の背景色を任意のものにするというものになります。
ちなみに背景色だけでなくテキストカラーも変更したいという場合は、-webkit-text-fill-color: xxx;xxxにはカラー名)という記述で変更可能です。

この方法は以下で紹介されているものです。