文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 入力部品のデザイン > テキスト入力をデザインする

テキスト入力をデザインする

テキスト入力をデザインする「input type="text"」の色や形は変更できます。また、入力状態やフォーカス移動によるデザイン変更も難しくはありません。
当ページでは、「input type="text"」の「色の変更」「入力ヒントの変更」「大きさの変更」「影付け」などを簡単操作でデザインできます。

テキスト入力をいろいろ変えてみよう！

色の指定箇所が多く以下の生成では透過で色の変化で設定や固定色を使用しています。ご利用時に色の指定を変更ください。

入力域の設定
文字サイズ
左右余白
高さ
フォーカス時のデザイン
入力ヒント
入力済みの色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
フォーカス時の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
使用したhtml
<input type="text" class="inText" id="inText1"
    placeholder="ＸＸ入力してください"
    onblur="coloeSet(this)"
    onfocus="colorReset(this)">
 
<input type="text" class="inText" id="inText2"
    placeholder="ＹＹ入力してください"
    onblur="coloeSet(this)"
    onfocus="colorReset(this)">
生成したCSS
<style type="text/css">
 /* --- INPUT=TEXTの標準デザイン設定 ---------------------*/
.inText {
  box-sizing    : border-box;
  margin        : 0;
  vertical-align: top;
 
  width         : 100%;                /* 一旦100%幅     */
  max-width     : 250px;               /* 入力域の最大幅 */
  height        : 47px;                /* 入力域の高さ   */
  background    : #ffffff;             /* 入力域の背景色 */
  border        : 2px solid #1e6bb9;   /* 入力域の枠線   */
  border-radius : 4px;                 /* 入力域の角丸   */
  padding       : 0 10px;              /* 入力文字の余白 */
  font-size     : 26px;                /* 入力文字サイズ */
  color         : #1e6bb9;             /* 入力文字の色   */
  font-weight   : bold;                /* 入力文字の太字 */
  letter-spacing: .1em;                /* 入力文字の間隔 */
}
 /* --- 入力フィールドにフォーカスか来たら ----------------*/
.inText:focus {
  border-color  : #59b300;                 /* 枠線色     */
  background    : rgba(89, 179, 0, 0.20);  /* 背景色     */
  box-shadow    : 4px 4px 2px #999;        /* 影付け     */
  outline       : 0;
}
 /* --- 入力説明の文字(標準) -----------------------------*/
.inText:placeholder-shown {
  color         : #808080;                 /* 文字色     */
  font-size     : 18px;                    /* 少し小さく */
}
 /* --- 入力説明の文字(Chrome,Safari,Android,iOS等) ---- -*/
.inText::-webkit-input-placeholder {
  color         : #808080;                 /* 文字色     */
  font-size     : 18px;                    /* 少し小さく */
}
 /* --- 入力説明の文字(IE用) -----------------------------*/
.inText:-ms-input-placeholder {
  color         : #808080;                 /* 文字色     */
  font-size     : 18px;                    /* 少し小さく */
}
 /* --- IEの入力エリア右側×消し -------------------------*/
.inText::-ms-clear {
  display     : none;                      /* ×を消す   */
}
</style>
生成したJavaScript
function coloeSet(argObj){
 // ==============================================
 //     入力済み時の背景色設定
 // ==============================================
    if(argObj.value==""){
        argObj.style.backgroundColor = "";
    }else{
        argObj.style.backgroundColor = gInColor;
    }
}
function colorReset(argObj){
    argObj.style.backgroundColor = "";
}

テキストエリア「textarea」のデザインは以下でご確認ください
テキストエリア(textarea)の高さを自動にする

ページTOP
広告
広告

色々なテキスト入力

丸いテキスト入力

cssの「border-radius」を利用すると、丸い入力テキストを作成することもできます。

<div class="sample1">
  <input type="text" placeholder="角丸入力のできます">
</div>
<style type="text/css">
.sample1 input[type="text"] {
  width         : 100%;                /* 一旦100%幅     */
  max-width     : 250px;               /* 入力域の最大幅 */
  height        : 47px;                /* 入力域の高さ   */
  background    : #ffffff;             /* 入力域の背景色 */
  border        : 2px solid #87a689;   /* 入力域の枠線   */
  border-radius : 23px;        /* ←ここで角丸のサイズを指定 */
  padding       : 0 20px;              /* 入力文字の余白 */
  font-size     : 26px;                /* 入力文字サイズ */
  color         : #323d33;             /* 入力文字の色   */
  font-weight   : bold;                /* 入力文字の太字 */
  letter-spacing: .1em;                /* 入力文字の間隔 */
}
/* --- 入力フィールドにフォーカスか来たら ---------------*/
.sample1 input[type="text"]:focus {
  border-color  : #db4949;             /* 枠線色         */
  background    : #ffffcc;             /* 背景色         */
  outline       : 0;
}
/* --- 入力説明の文字(標準) -----------------------------*/
.sample1 input[type="text"]:placeholder-shown {
  color         : #808080;             /* 文字色     */
  font-size     : 16px;                /* 少し小さく     */
 }
/* --- 入力説明の文字(Chrome,Safari,Android,iOS等) ---- -*/
.sample1 input[type="text"]::-webkit-input-placeholder {
  color         : #808080;             /* 文字色     */
  font-size     : 16px;                /* 少し小さく     */
}
/* --- 入力説明の文字(IE用) -----------------------------*/
.sample1 input[type="text"]:-ms-input-placeholder {
  color         : #808080;             /* 文字色         */
  font-size     : 16px;                /* 少し小さく     */
}
/* --- IEの入力エリア右側×消し -------------------------*/
.sample1 input[type="text"]::-ms-clear {
    display     : none;                /* ×を消す       */
}
</style>

横に伸びる入力

入力欄にフォーカスが入った時に入力欄を横に伸ばすこともできます。
以下のサンプルは、横伸ばしと合わせて角も丸くしています。

<div class="sample2">
  <input type="text" placeholder="フォーカスで横伸">
</div>
<style type="text/css">
.sample2 input[type="text"] {
  width         : 100%;                /* 一旦100%幅     */
  max-width     : 120px;               /* 入力域の最大幅 */
  height        : 47px;                /* 入力域の高さ   */
  background    : #ffffff;             /* 入力域の背景色 */
  border        : 2px solid #87a689;   /* 入力域の枠線   */
  border-radius : 4px;                 /* 入力域の角丸   */
  padding       : 0 20px;              /* 入力文字の余白 */
  font-size     : 26px;                /* 入力文字サイズ */
  color         : #323d33;             /* 入力文字の色   */
  font-weight   : bold;                /* 入力文字の太字 */
  letter-spacing: .1em;                /* 入力文字の間隔 */
  transition    : .2s;       /* ←ここに変化の時間を指定 */
}
/* --- 入力フィールドにフォーカスか来たら ---------------*/
.sample2 input[type="text"]:focus {
  max-width     : 250px;     /* ←ここに伸ばした後の幅を指定 */
  border-radius : 23px;      /* ←ここに丸めた後の丸めを指定 */
  border-color  : #db4949;             /* 枠線色         */
  background    : #ffffcc;             /* 背景色         */
  outline       : 0;
}
/* --- 入力説明の文字(標準) -----------------------------*/
.sample2 input[type="text"]:placeholder-shown {
  color         : #808080;             /* 文字色     */
  font-size     : 14px;                /* 少し小さく     */
 }
/* --- 入力説明の文字(Chrome,Safari,Android,iOS等) ---- -*/
.sample2 input[type="text"]::-webkit-input-placeholder {
  color         : #808080;             /* 文字色     */
  font-size     : 14px;                /* 少し小さく     */
}
/* --- 入力説明の文字(IE用) -----------------------------*/
.sample2 input[type="text"]:-ms-input-placeholder {
  color         : #808080;             /* 文字色         */
  font-size     : 14px;                /* 少し小さく     */
}
/* --- IEの入力エリア右側×消し -------------------------*/
.sample2 input[type="text"]::-ms-clear {
    display     : none;                /* ×を消す       */
}
</style>

入力ヒントの色を変更

入力欄に薄く表示される入力ヒントの文字色を変更することもできます。
ヒントの色はブラウザ毎に設定（ベンダープレフィックス）が異なり、同じ値を何度も設定する必要があります。

<div class="sample3">
  <input type="text" placeholder="入力ヒントの色変更">
</div>
<style type="text/css">
.sample3 input[type="text"] {
  width         : 100%;                /* 一旦100%幅     */
  max-width     : 250px;               /* 入力域の最大幅 */
  height        : 47px;                /* 入力域の高さ   */
  background    : #ffffff;             /* 入力域の背景色 */
  border        : 2px solid #87a689;   /* 入力域の枠線   */
  border-radius : 4px;                 /* 入力域の角丸   */
  padding       : 0 20px;              /* 入力文字の余白 */
  font-size     : 26px;                /* 入力文字サイズ */
  color         : #323d33;             /* 入力文字の色   */
  font-weight   : bold;                /* 入力文字の太字 */
  letter-spacing: .1em;                /* 入力文字の間隔 */
}
/* --- 入力フィールドにフォーカスか来たら ---------------*/
.sample3 input[type="text"]:focus {
  border-color  : #db4949;             /* 枠線色         */
  background    : #ffffcc;             /* 背景色         */
  outline       : 0;
}
/* --- 入力説明の文字(標準) -----------------------------*/
.sample3 input[type="text"]:placeholder-shown {
  color         : orange;      /* ←ここにヒントの文字色を指定 */
  font-size     : 16px;                /* 少し小さく     */
 }
/* --- 入力説明の文字(Chrome,Safari,Android,iOS等) ---- -*/
.sample3 input[type="text"]::-webkit-input-placeholder {
  color         : orange;      /* ←ここにヒントの文字色を指定 */
  font-size     : 16px;                /* 少し小さく     */
 }
/* --- 入力説明の文字(IE用) -----------------------------*/
.sample3 input[type="text"]:-ms-input-placeholder {
  color         : orange;      /* ←ここにヒントの文字色を指定 */
  font-size     : 16px;                /* 少し小さく     */
}
/* --- IEの入力エリア右側×消し -------------------------*/
.sample3 input[type="text"]::-ms-clear {
    display     : none;                /* ×を消す       */
}
</style>
ページTOP

注意事項

入力ヒントは主要ブラウザのベンダープレフィックスに対応しています。

IEのテキスト入力欄右側に表示される「×」を消すように設定されています。必要な場合はCSSより削除してください。

ページTOP
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの？
生成コードに利用制限はある？
生成コードに保証はある？
jQueryで生成できない？

広告
ページTOP

当サイト内の関連するページ

便利なCSS、JavaScriptの自動生成一覧

検索窓

チェックボックス

入力完了判定

パスワード

ラジオボタン

テキスト入力

テキストエリア
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン