SPサイト制作にてフォームを作成する際、select要素(プルダウンなど)にCSSで幅とか調整してみてもうまくいかないので「appearance」プロパティを使用してデザイン調整をします。 //appearanceプロパティを「button」に -webkit-appearance: button; -moz-appearance: button; appearance: button; //「選択してください」の前に少し余白を入れたい text-indent: 1em; //appearanceをbuttonにして背景色を指定しただけだとプルダウンに見えないのでbackgroundに矢印画像を指定する background:#EEE url(../img_common/arw_select_down.png) no-repeat; background-size:20px 10px; b
おすすめ書籍 シンカーデザイン|sincar design design Edgeは、関西を拠点に活動しているデザイン事務所 sincar designが運営しています。デザインツールの Tipsや HTML / CSS / JavaScriptに関するメモ、デザインの過程で思ったことなどを書き留めています。
CSS3の 隣接セレクタ、属性セレクタ、擬似セレクタの合わせ技で input[type=checkbox]:checked + label の書式を駆使すると、スタイルシートだけでcheckboxやradioのデザインを変更できます。 CSS3のセレクタに対応していないIE8以下では 通常のラジオボタンやチェックボックスが表示されます。 応用編で、cssだけでラジオボタンを2択スイッチに変更も紹介しています。 htmlの構成は inputの次にlabelを配置し、idとforで連動させるようにしておきます。 <div class="sample"> <div> <input type="radio" name="sample-radio" checked="checked" id="radio-1" /><label for="radio-1">radio 1</label> <input
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く