inputボタン CSSデザイン
Contents
【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 */
}
【ボタン見本】
チェックボックスやラジオボタンも、cssのみでカスタマイズできます。
こちらのページで紹介されています。
チェックボックス自体はdisplay:noneで消してしまい、labelにcssを適用します。
チェックボックス見本
こうしてみると、cssのみで色んなデザインのフォームが作れそうですね。
これまでJavascriptを使っていた人も、cssだけでカスタマイズできないか、一度見直してみてはいかがでしょうか。