![見出し画像](https://assets.st-note.com/production/uploads/images/37367931/rectangle_large_type_2_52e6d888a53e4fa9d7f704b440b516e1.jpeg?width=1200)
Photo by
mericanadesico
フォームの装飾について
セレクタの選択
/*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;}
この記事が気に入ったらサポートをしてみませんか?