見出し画像

フォームの装飾について

セレクタの選択

/*input要素にtype属性を指定することで様々な入力や選択用の項目を挿入できる*/
input要素の個別の属性セレクタを指定する場合
input[type="type属性"]{プロパティ:値;}

フォーム全体のinputセレクタを指定する場合

input{プロパティ:値;}

送信ボタンのを目立たせる

p.submit{
text-align:center;}

文字の太さを変更する

セレクタ{font-weight:値;}

font-weightプロパティの値

数値(100/200/300/400/500/600/700/800/900):数字の分だけ太く
normal:標準の太さ
bold:文字を太く(数値の700と同じ)
lighter:相対的に一段細く
bolder:相対的に一段太く

ボタンの角を丸くする

セレクタ{border-radius:値;}
記述例 input[type="submit"]{border-radius:8px;}

マウスカーソルの表示を変更する

セレクタ{cursor:値;}

マウスカーソルの種類を指定する値

default:デフォルトの状態(矢印)
pointer:リンクであることを示す
text:テキストであることを示す
move:移動できることを示す
cell:表のセルまたは一連のセルが選択できることを示す
not-allowed:操作が受け付けられないことを示す

マウスオーバーの時の装飾

input[type="submit"]:hover{opacity:0.8;}

この記事が気に入ったらサポートをしてみませんか?