【Labs】フォームの装飾いろいろ - web design lab
home > labs > 【Labs】フォームの装飾いろいろ

12月更新・前月(11月)の人気記事トップ10 12/07/2023

  1. ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
  2. ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
  3. ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
  4. ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
  5. ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  6. (圏外↑) 【jQuery】入門11. switch文による条件分岐
  7. (圏外↑) 【Mac】Safariでソースコードを見る方法
  8. ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
  9. (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
  10. (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村
【HTMLリファレンス】col要素 【HTMLリファレンス】label要素

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


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

こんにちは（・∀・）

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

フォームの装飾いろいろ

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
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】郵便番号でフォームの住所を自動入力
【Labs】入力しやすい入力フォーム
【Labs】クリックしやすいラジオボタンとチェックボックス

【HTMLリファレンス】col要素 【HTMLリファレンス】label要素
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村