menu
menu

キーワード検索

 

最近の投稿

フォームの装飾いろいろ

  • Labs

HTML

こんにちは(・∀・)

今回は入力フォーム系に便利なCSSやJavaScriptを使った効果をまとめましたのでそれらサンプルをご紹介いたします。

1. 入力フォームにフォーカスさせるサンプル

フォーカスさせたい入力フォームにclass名demo1_1を付けます。

サンプルデモ

 NAME :

HTML

Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<p>NAME : <input type="text" class="demo1_1" value=""></p>
JavaScript

$(function() {
$(".demo1_1").focus();
});
2. 入力フォームとテキストエリアのIME MODEを指定するサンプル

属性ime-mode値active、disabled、autoを使ってIME MODEの指定を行なってください。ブラウザによってはIME MODEの指定を行なってもうまく反映されないこともありますのでご注意ください。

サンプルデモ

  お名前:

  メール:

 コメント:

HTML

<p>お名前:<input type="text" class="demo2_1"></p>
<p>メール:<input type="text" class="demo2_2"></p>
<p>コメント:<textarea class="demo2_3"></textarea></p>
CSS

.demo2_1 {
	ime-mode: active;
}
.demo2_2 {
	ime-mode: disabled;
}
.demo2_3 {
	ime-mode: auto;
}
3. 画像を設定するサンプル

入力フォームとテキストエリアに背景画像を設定するサンプルです。

サンプルデモ

 サンプル1 :

 サンプル2 :

HTML

<p>サンプル1 : <input type="text" class="demo3_1"></p>
<p>サンプル2 : <textarea class="demo3_2"></textarea></p>
CSS

.demo3_1 {
	width: 200px;
	height: 20px;
	background: url(search.png) no-repeat 2px center;
	padding-left: 20px;
}
.demo3_2 {
	width: 250px;
	height: 180px;
	background: url(line.png) repeat top center;
	line-height: 30px;
}
4. テキストを初期表示させるサンプル

入力フォームにテキストを初期表示させてフォーカスしたら消すサンプルです。

サンプルデモ

 

HTML

Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<p><input type="text" class="demo4_1" value="キーワードを入力してください"></p>
JavaScript

$(".demo4_1").css({"color": "blue","font-size": "12px","padding": "2px","width": "200px"});
$(".demo4_1").focus(function(){
    if(this.value == "キーワードを入力してください"){
      $(this).val("").css("color","red");
    }
});
$(".demo4_1").blur(function(){
    if(this.value == ""){
      $(this).val("キーワードを入力してください").css("color","blue");
    }
});
});
5. 画像とテキストを初期表示させるサンプル

入力フォームに背景画像とテキストを初期表示させてフォーカスしたら消すサンプルです。

サンプルデモ

HTML

Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<p><input type="text" class="demo5_1" value="キーワードを入力してください"></p>
JavaScript

$(function(){
$(".demo5_1")/*.val("キーワードを入力してください")*/.css({"color": "blue","font-size": "12px","padding": "2px 2px 2px 20px","width": "182px","background-image": "url(/labs/form/search.png)", "background-repeat": "no-repeat"});
$(".demo5_1").focus(function(){
    if(this.value == "キーワードを入力してください"){
      $(this).val("").css({"color": "red","padding": "2px","width": "200px","background-image": "none"});
    }
});
$(".demo5_1").blur(function(){
    if(this.value == ""){
      $(this).val("キーワードを入力してください").css({"color": "blue","padding": "2px 2px 2px 20px","width": "182px","background-image": "url(/labs/form/search.png)", "background-repeat": "no-repeat"});
    }
});
});
6. HTML5のplaceholderを使ってテキストを初期表示

HTML5のplaceholderを使ってフォーム内にテキストを入れておきフォーカスしたらテキストを消します。*IE9以上。

ブラウザによってはフォーカスしただけでは消えず、テキストを入力したら消える場合もあります。

サンプルデモ
HTML

<div class="demo6_1"><input type="text" placeholder="お名前"></div>
<div class="demo6_2"><input type="text" placeholder="メールアドレス"></div>
<div class="demo6_3"><textarea placeholder="コメント"></textarea></div>
7. フォーカスしたら色を変える

フォーカスしたらフォームの背景色の色を変更します。

サンプルデモ
HTML

<div class="demo7_1"><input type="text"></div>
<div class="demo7_2"><input type="text"></div>
<div class="demo7_3"><textarea></textarea></div>
CSS

.demo7_1 input:focus,
.demo7_2 input:focus {
	background: #9fb7d4;
}
.demo7_3 textarea:focus {
	background: #9fb7d4;
}
8. ラジオボタンの装飾

ラジオボタンを装飾してみる。

サンプルデモ
HTML

<div class="demo8"><input type="radio" id="demo8_1" name="radio-sample" checked><label for="demo8_1">sample-radio1</label></div>
<div class="demo8"><input type="radio" id="demo8_2" name="radio-sample"><label for="demo8_2">sample-radio2</label></div>
<div class="demo8"><input type="radio" id="demo8_3" name="radio-sample"><label for="demo8_3">sample-radio3</label></div>
CSS

.demo8 input[type="radio"]:checked,
.demo8 input[type="radio"]:not(:checked) {
	display: none;
}
.demo8 input[type="radio"]:checked + label,
.demo8 input[type="radio"]:not(:checked) + label {
	position: relative;
	padding-left: 25px;
	cursor: pointer;
	line-height: 19px;
	display: inline-block;
}
.demo8 input[type="radio"]:checked + label:before,
.demo8 input[type="radio"]:not(:checked) + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 17px;
	height: 17px;
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 100%;
}
.demo8 input[type="radio"]:checked + label:after,
.demo8 input[type="radio"]:not(:checked) + label:after {
	content: '';
	width: 13px;
	height: 13px;
	background: #d49fc2;
	position: absolute;
	top: 3px;
	left: 3px;
	border-radius: 100%;
}
.demo8 input[type="radio"]:not(:checked) + label:after {
	opacity: 0;
	transform: scale(0);
}
.demo8 input[type="radio"]:checked + label:after {
	opacity: 1;
	transform: scale(1);
}
9. チェックボックスの装飾

チェックボックスを装飾してみる。

サンプルデモ
 
 
 
HTML

<div class="demo9"><input type="checkbox" id="demo9_1" checked><label for="demo9_1">sample-checkbox1</label></div>
<div class="demo9"><input type="checkbox" id="demo9_2"><label for="demo9_2">sample-checkbox2</label></div>
<div class="demo9"><input type="checkbox" id="demo9_3"><label for="demo9_3">sample-checkbox3</label></div>
CSS

.demo9 input[type="checkbox"]:checked,
.demo9 input[type="checkbox"]:not(:checked) {
	display: none;
}
.demo9 input[type="checkbox"]:checked + label,
.demo9 input[type="checkbox"]:not(:checked) + label {
	position: relative;
	padding-left: 25px;
	cursor: pointer;
	line-height: 19px;
	display: inline-block;
}
.demo9 input[type="checkbox"]:checked + label:before,
.demo9 input[type="checkbox"]:not(:checked) + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 17px;
	height: 17px;
	border: 1px solid #ccc;
	background: #fff;
}
.demo9 input[type="checkbox"]:checked + label:after,
.demo9 input[type="checkbox"]:not(:checked) + label:after {
	content: '';
	width: 13px;
	height: 13px;
	background: #d49fc2;
	position: absolute;
	top: 3px;
	left: 3px;
}
.demo9 input[type="checkbox"]:not(:checked) + label:after {
	opacity: 0;
	transform: scale(0);
}
.demo9 input[type="checkbox"]:checked + label:after {
	opacity: 1;
	transform: scale(1);
}
関連リンク

郵便番号でフォームの住所を自動入力
フォームの自動カナ入力
入力しやすい入力フォーム
クリックしやすいラジオボタンとチェックボックス

  • カテゴリー:Labs