FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【css】 form_css 1

sample
ex_form1.png
html

<div id="stylized" class="myform">
<h1>やることの追加</h1>
<p>○がついている項目は必須です。</p>
<form>
<label>○やること名
<span class="small">やることリストに乗せる名前を記入して下さい</span>
</label>
<input name="todo_name">

<button type="submit" id="ajax_button_todo">追加する</button>
</form>
</div>



css

.myform{
margin:0 auto;
width:420px;
padding:14px;
}

/* ----------- stylized start ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:198px;
height:30px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:10px;
font-weight:normal;
text-align:right;
width:198px;
}
#stylized input,select,textarea{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}

スポンサーサイト

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

コメントの投稿

Private :

カウンター
   
プロフィール

glasses

Author:glasses
物事をすぐ忘れる自分のためのブログ。

カテゴリ
カレンダー(月別)
11 ≪│2018/12│≫ 01
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
最新記事
最新コメント
検索フォーム
リンク
サービス
track feed track あわせて読みたいブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。