2013.05.14
css

CSS input メールフォームの入力欄とボタンをカスタマイズ

メールフォームなどの入力欄やボタンなどの装飾方法です。

HTMLで記述するinputをCSSでカスタマイズすることでフォームを自由にデザインできます。

入力欄・テキストフィールド

通常、入力欄を作るときはHTMLで下記のように記述します。

HTMLソース

<input type="text"/>
デフォルトの入力欄 
Attention!!
こういった入力欄は通常、phpなどに値を渡したりするので、さらに必要な記述がありますが、今回はフォームの装飾についてなので省略します。

さて、上記のinputのtypeにはいくつか種類があります。

入力欄、フォームの場合は

type=”text”
type=”password”

などがよく使われると思います。
text、passwordの他にも、email、datetime、search、url、telなどありますがブラウザのサポートがまだまだ確実ではないようなので注意が必要です。

type=”text”に対してCSSでカスタマイズしたい場合は以下のようにします。

CSSソース

input[type=text]{
   /*ここに通常通りCSSで記述*/
}

入力欄・テキストフィールドのカスタマイズ例

HTMLソース

<input type="text"/>

CSSソース

input[type=text]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   width:200px;
   height:25px;
   padding:0 3px;
}

input[type=text]:focus {
   border:solid 1px #20b2aa;
}

input[type=text], select { 
   outline: none;
}
ちょっとオシャレにカスタマイズした入力欄 

CSSの説明

  • 11行目
  • widthで幅を200pxとしました。
    もし入力フォームごとに幅を変えたい場合は、11行目を削除し、HTMLに下記のように記述することもできます。

    <input type="text" style="width:200px;"/>
    

    もしくは

    <input type="text" size="30"/>
    

    sizeだとブラウザによって若干幅が異なるので、ピクセルのほうが良いと思います。

  • 16行目
  • 入力フォームをマウスでクリックして書き込んでいる状態のときです。

  • 20行目
  • Google Chrome用に記述。
    フォーカス時にクロムだとボーダーが消えないので記述しています。

送信ボタンなど

通常の送信ボタンはHTMLで下記のように記述。

HTMLソース

<input type="button" value="送信"/>
デフォルトの送信ボタン 

ボタンに関するtypeはbuttonの他にsubmit、resetがあります。
type=”button”をCSSでカスタマイズする場合はCSSで下記のように。

CSSソース

input[type=button]{
   /*ここに通常通りCSSで記述*/
}

送信ボタンのカスタマイズ例

HTMLソース

<input type="button" value="送信"/>

CSSソース

input[type=button]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   width:200px;
   height:25px;
   padding:0 3px;
   cursor:pointer;
   color:#333;
   font-weight:bold;
   background:#f5f5f5;
   text-shadow:1px 1px 0px #fff;
}
ちょっとオシャレにカスタマイズした送信ボタン 
関連する記事

コメント & トラックバック
  1. motti

    ワードプレスでボタンの大きさが変更できました。
    とっても助かりました。
    ありがとうございました。


    • Ri-mode

      mottiさん

      コメントありがとうございます。お役にたてて光栄です。


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP