menu
menu

フォームの装飾いろいろ | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook12
  • はてなブックマーク6
  • Google+9
  • Pocket0
  • Twitter0

フォームの装飾いろいろ

  • Labs

HTML CSS JavaScript

こんにちは(・∀・)

 今回は入力フォーム系に便利な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

<p class="demo6_1"><input type="text" placeholder="お名前"></p>
<p class="demo6_2"><input type="text" placeholder="メールアドレス"></p>
<p class="demo6_3"><textarea placeholder="コメント"></textarea></p>

7. フォーカスしたら色を変える

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

サンプルデモ

HTML

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

.demo7_1 input:focus,
.demo7_2 input:focus {
	background: #9fb7d4;
}
.demo7_3 textarea:focus {
	background: #9fb7d4;
}

8. ラジオボタンの装飾

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

サンプルデモ

HTML

<p class="demo8"><input type="radio" id="demo8_1" name="radio-sample" checked><label for="demo8_1">sample-radio1</label></p>
<p class="demo8"><input type="radio" id="demo8_2" name="radio-sample"><label for="demo8_2">sample-radio2</label></p>
<p class="demo8"><input type="radio" id="demo8_3" name="radio-sample"><label for="demo8_3">sample-radio3</label></p>
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

<p class="demo9"><input type="checkbox" id="demo9_1" checked><label for="demo9_1">sample-checkbox1</label></p>
<p class="demo9"><input type="checkbox" id="demo9_2"><label for="demo9_2">sample-checkbox2</label></p>
<p class="demo9"><input type="checkbox" id="demo9_3"><label for="demo9_3">sample-checkbox3</label></p>
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
  • facebook12
  • はてなブックマーク6
  • Google+9
  • Pocket0
  • Twitter0