【Labs】フォームの装飾いろいろ

Posted on 2012-11-15
Last updated on 2017-09-13

こんにちは（・∀・）

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

フォームの装飾いろいろ

1. 入力フォームにフォーカスさせるサンプル
2. 入力フォームとテキストエリアのIME MODEを指定するサンプル
3. 画像を設定するサンプル
4. テキストを初期表示させるサンプル
5. 画像とテキストを初期表示させるサンプル
6. HTML5のplaceholderを使ってテキストを初期表示
7. フォーカスしたら色を変える
8. ラジオボタンの装飾
9. チェックボックスの装飾

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

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

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


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

HTML


<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. テキストを初期表示させるサンプル

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

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


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

HTML


<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. 画像とテキストを初期表示させるサンプル

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

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


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

HTML


<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[type="text"],
.demo7_2 input[type="text"] {
  border: 1px solid #9fb7d4;
}
.demo7_1 input:focus,
.demo7_2 input:focus {
  background: #9fb7d4;
  border: 1px solid #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

sample-radio1

sample-radio2

sample-radio3

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

　sample-checkbox1

　sample-checkbox2

　sample-checkbox3

9月更新・前月(8月)の人気記事トップ10 09/02/2024