[CSS]checkboxとテキストの位置がずれるのを直す
Read More
HTMLを普通に組んでいるとチェックボックスとかラジオボタンがテキストとずれる。
だからinput要素のチェックボックスとテキストとのずれをCSSで調整する。
■CSSでチェックボックスのズレを調整する
画像はFirefoxのもの。
以下のブラウザで動作確認済み。
IE7、IE8、IE9、IE11、Firefox38.3、Chrome47、Safari5.1.7
まあちょっとした違いといえばそうなんだろうけど気になるもんは気になる。
だからinput要素のチェックボックスとテキストとのずれをCSSで調整する。
■CSSでチェックボックスのズレを調整する
input[type="checkbox"],
input[type="radio"] {
display: inline-block;
margin: 0 2px;
padding: 0;
vertical-align: middle;
position: relative;
top: -1px;
cursor: pointer;
}
以下のブラウザで動作確認済み。
IE7、IE8、IE9、IE11、Firefox38.3、Chrome47、Safari5.1.7
まあちょっとした違いといえばそうなんだろうけど気になるもんは気になる。
Category "HTML・JS・CSS" の最新記事
- マトリックス風な画面を動的に生成するページ (0)
- [Javascript]ウィンドウを閉じるwindow.close()が効かない (0)
- [CSS]連番のIDやクラスをまとめて指定する書き方 (0)
- 本サイトのfont-familyを変更してみた (0)
- [HTML・JS・CSS]プロパティとアトリビュートの違い (4)
- [知らなかった]form要素のaction属性に指定するURLの末尾のスラッシュを省略すると (7)
- [CSS]ライン(border)に点線を使うとページスクロールが重くなった (2)
- [CSS]画面をスクロールしたときにサイドバーの要素を追尾させる方法 (0)
- input type="submit" でボタンに画像を使う方法 (6)
- 圧縮したjsファイルを解凍するツール「jsbeautifier.org」 (0)