inputボタン CSSデザイン

2014年5月20日

Contents

1 【CSS】意外と知らない！？inputタグをcssのみでカスタマイズする方法
2 【フォーム見本01】
3 フォーム見本02
4 ◆JS
5 ◆CSS
6 【フォーム見本03】
7 【ボタン見本】
8 チェックボックス見本

【CSS】意外と知らない！？inputタグをcssのみでカスタマイズする方法

input系をcssで装飾したい時には、「属性セレクタ」を使うと切り分けが便利です。属性セレクタは、要素名の後ろに[]を記述し、その中で属性名や値を指定するものです。
例えば、下記のような記述をすると、href属性を持つa要素にスタイルが適用されます。

a[href]{ font-size:20px; }

これを利用して、input要素のtype属性の値がtextの時にだけスタイルを適用してみましょう。

input[type=text]{ width:200px; height:24px; line-height:24px; font-size:14px; padding:0 5px 0 5px; -webkit-box-shadow: 0px 1px rgba(255, 255, 255, 0.5); -moz-box-shadow: 0px 1px rgba(255, 255, 255, 0.5); box-shadow: 0px 1px rgba(255, 255, 255, 0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

【フォーム見本01】

フォーカスが当たったとき、内側に影を付けてみます。

input[type=text]:focus{ -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); }

フォーム見本02

入力する箇所にあらかじめテキストを入れておき、フォーカスが当たると消す、というよくあるあのタイプを作るには、Javascriptを使います。

以下は、jqueryを使用した場合のスクリプトです。

JS側で最初から表示されている文字色を指定し、CSSで実際に入力する際の文字色を指定します。

◆JS

$(document).ready(function () { $(":input[data-watermark]").each(function () { $(this).val($(this).attr("data-watermark")); $(this).bind('focus', function () { if ($(this).val() == $(this).attr("data-watermark")) $(this).val(''); }); $(this).bind('blur', function () { if ($(this).val() == '') $(this).val($(this).attr("data-watermark")); $(this).css('color','#cccccc');//ここで文字色を指定 }); }); });

◆CSS

input[type=text]{ color:#000000; }

【フォーム見本03】

今度は、ボタンをデザインしてみましょう。
ボタンの場合は、input[type=button]になります。
ボタンらしく見せるために、背景をグラデーションにして薄く影をつけました。

input[type=button]{ background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa)); background-image: -webkit-linear-gradient(top, #ddd, #aaa); background-image: -moz-linear-gradient(top, #ddd, #aaa); background-image: -ms-linear-gradient(top, #ddd, #aaa); background-image: -o-linear-gradient(top, #ddd, #aaa); background-image: linear-gradient(top, #ddd, #aaa); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddd', endColorstr='#aaa',GradientType=0 ); /* IE6-9 */ }