menu
menu

キーワード検索

 

前月(7月)の人気記事トップ10

  1. ( 1-) CSSだけでドロップダウンメニュー
  2. ( 2-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) スマホサイトの作成・基本編
  4. ( 4-) CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) jQueryで日時を表示【実践でjQuery入門】
  6. ( 5↓) 表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 9↑) スマホサイト向け横にスクロールするナビゲーション
  8. ( 8-) HTML5・ページ作成の基本
  9. ( -↑) Windows 10にMySQLをインストール
  10. ( -↑) 変数を宣言する【jQuery入門】

フォームの装飾いろいろ

  • Labs

HTML

こんにちは(・∀・)

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

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

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

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();
});
Result

 NAME :


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

  お名前:

  メール:

 コメント:


3. 画像を設定するサンプル

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

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

 サンプル1 :

 サンプル2 :


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");
    }
});
});
Result

 


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"});
    }
});
});
Result


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>
Result

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

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

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

関連リンク

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

  • カテゴリー:Labs