チェックボックスとそのラベルをブラウザ間で一貫して揃える方法
これは私を絶えず悩ませている小さなCSSの問題の1つです。 Stack Overflowの人々はどうやってcheckboxesとlabels一貫して クロスブラウザ と整列しているの？ Safariでそれらを正しく揃えると（通常inputではvertical-align: baselineを使用します）、FirefoxとIEでは完全にオフになります。 Firefoxで修正すると、SafariとIEは必然的に混乱します。フォームをコーディングするたびに、これに時間がかかります。
これが私が働く標準的なコードです。
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>私は通常Eric Meyerのリセットを使用しているので、フォーム要素は比較的オーバーライドがありません。あなたが提供しなければならないどんなヒントやトリックを楽しみにしています！
1時間以上の微調整、テスト、そしてさまざまなスタイルのマークアップを試した後で、私はまともな解決策があると思います。このプロジェクトの要件は次のとおりです。
- 入力はそれら自身の行になければなりません。
- チェックボックス入力は、すべてのブラウザにわたって、ラベルテキストと同じように（同じではない場合も）同様に垂直に揃える必要があります。
- ラベルテキストが折り返される場合は、インデントする必要があります（チェックボックスの下に折り返さないでください）。
説明を始める前に、コードを説明します。
label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>これは JSFiddle にある作業例です。
このコードは、Eric Meyerのように、フォームの入力余白とパディングを上書きしないようにリセットを使用していることを前提としています（したがって、入力CSSに余白とパディングのリセットを入れます）。明らかにライブ環境では、他の入力要素をサポートするためのものを入れ子にしたりオーバーライドしたりすることになるでしょうが、私は物事を単純にしたいと思いました。
注意事項：
*overflow宣言はインラインのIEハック（スタープロパティハック）です。 IE 6と7の両方がそれに気付くでしょうが、SafariとFirefoxはそれを適切に無視します。私はそれが有効なCSSかもしれないと思います、しかしあなたはまだ条件付きコメントでいっそう良いです。単純にするためにそれを使いました。- 私が言える限りでは、ブラウザ間で一貫性のある唯一の
vertical-alignステートメントはvertical-align: bottomでした。これを設定してから相対的に上方に配置しても、Safari、Firefox、およびIEでは、わずか1〜2ピクセルの矛盾があります。 - 整列を扱う際の主な問題は、IEが入力要素の周りにたくさんの不思議な空間を貼り付けることです。それはパディングやマージンではありません、そしてそれはしつこいしつこいです。チェックボックスに幅と高さを設定してから何らかの理由で
overflow: hiddenを設定すると、余分なスペースが削減され、IEの位置をSafariやFirefoxとまったく同じように機能させることができます。 - テキストのサイズに応じて、物事が正しく見えるように相対位置、幅、高さなどを調整する必要があることは間違いありません。
これが他の誰かに役立つことを願っています！私は今朝取り組んでいたもの以外のプロジェクトでこの特定のテクニックを試したことがありません。
垂直方向の整列では、正しく機能するために、2つのインライン要素（span、label、inputなど）が互いに隣接していることが必要な場合があります。次のチェックボックスは、テキストサイズが非常に小さい場合でも大きい場合でも、IE、Safari、FF、およびChromeで縦に中央揃えにされています。
それらはすべて同じ行に並んでいますが、nowrapはラベルテキスト全体が常にチェックボックスの隣にあることを意味します。
欠点は、余分な意味のないSPANタグです。
.checkboxes label {
display: block;
float: left;
padding-right: 10px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}<form>
<div class="checkboxes">
<label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
<label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
<label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
</div>
</form>チェックボックスの下を折り返さずに折り返すのに 必要な という非常に長いラベルテキストがある場合は、ラベル要素にパディングと負のテキストインデントを使用します。
.checkboxes label {
display: block;
float: left;
padding-right: 10px;
padding-left: 22px;
text-indent: -22px;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}<form>
<div class="checkboxes">
<label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
<label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
<label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
</div>
</form>One Crayonの解決策 から作業を進めてください - /、私には有効で簡単なものがあります。
.font2 {font-family:Arial; font-size:32px} /* Sample font */
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
input[type=radio] {
bottom: 2px;
} <label><input type="checkbox" /> Label text</label>
<p class="font2">
<label><input type="checkbox"/> Label text</label>
</p>Safari（そのベースラインは私が信頼しています）とFirefoxとIE 7の両方で同じようにピクセルごとにレンダリングします。それはまた、さまざまなラベルフォントサイズ（大小）で機能します。さて、選択と入力に関するIEのベースラインを修正しました...
更新： （サードパーティ編集）
適切なbottomの位置はfont-familyとfont-sizeによって異なります。チェックボックスとラジオ要素にbottom: .08em;を使用することは一般的に良い値です。私はいくつかの小/中/大のフォントサイズを使って、ArialとCalibriフォントを使ってウィンドウズでChrome/Firefox/IE11でそれをテストしました。
.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: .08em; /* this is a better value for different fonts! */
}<label><input type="checkbox" /> Label text</label>
<p class="font2">
<label><input type="checkbox"/> Label text</label>
</p>うまくいくように見える簡単なことの1つは、vertical-alignでチェックボックスの垂直位置を調整することです。それはまだブラウザによって異なりますが、解決策は複雑ではありません。
input {
vertical-align: -2px;
}
vertical-align: middleを試してください
また、あなたのコードは以下のようになっているはずです。
<form>
<div>
<input id="blah" type="checkbox"><label for="blah">Label text</label>
</div>
</form>私の解決策を試してみてください、私はそれをIE 6、FF2そしてChromeで試しました、そしてそれはすべての3つのブラウザでピクセルごとにレンダリングします。
* {
padding: 0px;
margin: 0px;
}
#wb {
width: 15px;
height: 15px;
float: left;
}
#somelabel {
float: left;
padding-left: 3px;
}<div>
<input id="wb" type="checkbox" />
<label for="wb" id="somelabel">Web Browser</label>
</div>私にとって唯一の完璧な解決策は、次のとおりです。
input[type=checkbox], input[type=radio] {
vertical-align: -2px;
margin: 0;
padding: 0;
}
Chrome、Firefox、Opera、IE 7、および8で本日テスト済み。例：Fiddle
私は通常私の静的テキストの垂直位置を調整するために行の高さを使います：
label {
line-height: 18px;
}
input {
width: 13px;
height: 18px;
font-size: 12px;
line-height: 12px;
}<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>それが役立つことを願っています。
私は自分のソリューションを完全にはテストしていませんが、うまくいくようです。
私のHTMLは単純です：
<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
次に、高さと幅の両方について、すべてのチェックボックスを24pxに設定します。テキストを整列させるために、ラベルのline-heightも24pxにし、vertical-align: top;を次のように割り当てます。
編集： _ IEテストの後、入力にvertical-align: bottom;を追加して、ラベルのCSSを変更しました。パディングを整理するには、条件付きIE cssケースが必要な場合がありますが、テキストとボックスはインラインです。
input[type="checkbox"] {
width: 24px;
height: 24px;
vertical-align: bottom;
}
label.checkbox {
vertical-align: top;
line-height: 24px;
margin: 2px 0;
display: block;
height: 24px;
}
これがうまくいかないことを誰かが見つけた場合、親切に私に知らせてください。これが実際の動作です（ChromeとIE - 網膜でスクリーンショットが撮られたため謝罪し、IEではパラレルを使用）
これは私にはうまくいきます：
fieldset {
text-align:left;
border:none
}
fieldset ol, fieldset ul {
padding:0;
list-style:none
}
fieldset li {
padding-bottom:1.5em;
float:none;
clear:left
}
label {
float:left;
width:7em;
margin-right:1em
}
fieldset.checkboxes li {
clear:both;
padding:.75em
}
fieldset.checkboxes label {
margin:0 0 0 1em;
width:20em
}
fieldset.checkboxes input {
float:left
}<form>
<fieldset class="checkboxes">
<ul>
<li>
<input type="checkbox" name="happy" value="yep" id="happy" />
<label for="happy">Happy?</label>
</li>
<li>
<input type="checkbox" name="hungry" value="yep" id="hungry" />
<label for="hungry">Hungry?</label>
</li>
</ul>
</fieldset>
</form>Flexboxは最近のすべてのブラウザでサポートされているので、このようなことは私にとってはより簡単な方法のように思えます。
<style>
label {
display: flex;
align-items: center;
}
input[type=radio], input[type=checkbox]{
flex: none;
}
</style>
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>
プレフィックス付きバージョンの完全なデモは以下のとおりです。
label {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
input[type=radio],
input[type=checkbox] {
-webkit-box-flex: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
margin-right: 10px;
}
/* demo only (to show alignment) */
form {
max-width: 200px
}<form>
<label>
<input type="radio" checked>
I am an aligned radio and label
</label>
<label>
<input type="checkbox" checked>
I am an aligned checkbox and label
</label>
</form>相対的な配置は好きではありません。それは要素がそのレベルで他の何よりも上にレンダリングされるようにするからです（複雑なレイアウトがある場合、それは何かの上に乗ることができます）。
私は、vertical-align: subによって、チェックボックスがChrome、Firefox、およびOperaで十分に揃って見えるようになることを発見しました。私はMacOSを持っていないし、IE10が少しオフになっているのでSafariをチェックできないが、私にはそれが十分に良い解決策であることがわかった。
別の解決策は、すべてのブラウザに合わせて特定のCSSを作成し、％/ pixels/EMの垂直方向の配置で微調整することです。 http://css-tricks.com/snippets/css /ブラウザ固有のハック/
私はこのようにしても問題はありませんでした。
<form>
<div>
<input type="checkbox" id="cb" /> <label for="cb">Label text</label>
</div>
</form>
400以上の投票で選ばれた答えはChrome 28 OSXではうまくいきませんでした。おそらくそれがOSXでテストされていないか、あるいはこの質問に答えたときに2008年頃にはうまくいったからでしょう。
時代は変わり、新しいCSS 3ソリューションが実現可能になりました。私の解決策は 擬似要素 を使って カスタムチェックボックス を作成しています。そのため、規定（長所または短所、あなたはそれを見て）は次のとおりです。
- 最近のブラウザ（FF3.6以降、IE9以降、Chrome、Safari）でのみ動作します。
- カスタム設計されたチェックボックスに頼ります、それはすべてのブラウザ/ OSで全く同じようにレンダリングされます。ここで私はちょうどいくつかの単純な色を選びました、しかしあなたはいつでも線形のグラデーションを加えることができました、そしてそれをよりいっそう魅力的にするためにそのようなもの。
- 特定のフォント/フォントサイズに合わせて変更されている場合は、チェックボックスの位置とサイズを変更するだけで、縦に並ぶように表示されます。正しく微調整しても、最終結果はすべてのブラウザ/オペレーティングシステムでまったく同じになるはずです。
- 垂直配向性なし、フロートなし
- 私の例では提供されたマークアップを使わなければなりません、質問のように構造化されているならそれは機能しません、しかし、レイアウトは本質的に同じに見えるでしょう。物事を動かしたい場合は、関連CSSも移動する必要があります。
あなたのHTML：
<form>
<div class="checkbox">
<input id="check_me" type=checkbox />
<label for="check_me">Label for checkbox</label>
</div>
</form>
あなたのCSS：
div.checkbox {
position: relative;
font-family: Arial;
font-size: 13px;
}
label {
position: relative;
padding-left: 16px;
}
label::before {
content :"";
display: inline-block;
width: 10px;
height: 10px;
background-color: white;
border: solid 1px #9C9C9C;
position: absolute;
top: 1px;
left: 0px;
}
label::after {
content:"";
width: 8px;
height: 8px;
background-color: #666666;
position: absolute;
left: 2px;
top: 3px;
display: none;
}
input[type=checkbox] {
visibility: hidden;
position: absolute;
}
input[type=checkbox]:checked + label::after {
display: block;
}
input[type=checkbox]:active + label::before {
background-color: #DDDDDD;
}
この解決策 は、チェックボックス を非表示にし、ラベルに擬似要素を追加してスタイルを設定して表示されるチェックボックスを作成します。ラベルは非表示のチェックボックスに関連付けられているため、入力フィールドは引き続き更新され、値はフォームと共に送信されます。
jsFiddle： http://jsfiddle.net/SgXYY/6/
そしてあなたが興味を持っているのであれば、これがラジオボタンの私の見方です： http://jsfiddle.net/DtKrV/2/
誰かがこれが役に立つことを願っています！
ラベルの 'for'属性についての議論に追加したいだけでした（トピックが少し外れています）。
Javascriptから使用するのはとても便利なので、必要でなくても指定してください。
var label = ...
var input = document.getElementById(label.htmlFor);
ラベルに入力がネストされているか、入力がラベルの前にあるか、または後にあるかを判断するよりもはるかに便利です。
たった2セントです。
ASP.NET Webフォームを使用している場合 DIVなどの要素や固定サイズについて心配する必要はありません。 CSSで<asp:CheckBoxList>をCheckboxList入力タイプに設定することで、float:leftテキストを整列させることができます。
次のコード例を確認してください。
.CheckboxList
{
font-size: 14px;
color: #333333;
}
.CheckboxList input
{
float: left;
clear: both;
}
.ASPXコード：
<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>
<form>
<div>
<label style="display: inline-block">
<input style="vertical-align: middle" type="checkbox" />
<span style="vertical-align: middle">Label text</span>
</label>
</div>
</form>
トリックは、テーブルセル内でのみ垂直整列を使用するか、ラベルタグを使用する場合はインラインブロックを使用することです。
最後に問題の原因を見てみましょう
チェックボックスは画像を使用してレンダリングされます（CSSを介してカスタム設定できます）。 FireFoxの（チェックされていない）チェックボックスは、DOMインスペクターで強調表示されています。
そして、Chromeの同じスタイルのないチェックボックスは次のとおりです。
マージン（オレンジ）を確認できます。パディングは存在しません（緑色で表示されます）。では、チェックボックスの右側と下部にあるこの擬似マージンは何ですか？ これらは、チェックボックスに使用される画像の一部です。 vertical-align: middleだけを使用するだけでは十分ではなく、それがクロスブラウザの問題の原因です。
では、これについて何ができるでしょうか？
明らかなオプションの1つは、画像を置き換えることです！幸いなことに、CSSを介してこれを実行し、それらを外部画像、base64（in-CSS）画像、in-CSS svgまたは単なる擬似要素で置き換えることができます。これは堅牢な（クロスブラウザ！）アプローチであり、ここに この質問 から盗まれたそのような調整の例を示します。
.checkbox-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
content: '';
display: inline-block;
background: #fff;
border-radius: 5px;
border: 2px solid #ddd;
vertical-align: middle;
width: 10px;
height: 10px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
width: 1px;
height: 5px;
border: solid blue;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-radius: 0px;
margin: 0px 15px 5px 5px;
}<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>このようなスタイリングに関する詳細な記事は、リストにある here ;のように読むことができます。この答えの範囲外です。
それでは、カスタムイメージや疑似要素のないソリューションについてはどうでしょうか。
TL; DR：これは機能しないようです。代わりにカスタムチェックボックスを使用してください
まず、他のブラウザでチェックボックスアイコン内のこれらの擬似マージンがarbitrary意的である場合、一貫した解決策がなかったことに注意しましょう。 1つを作成するには、既存のブラウザーでそのような画像の構造を調べる必要があります。
では、どのブラウザのチェックボックスに擬似マージンがあるのでしょうか？ Chrome 75、Vivaldi 2.5（Chromiumベース）、FireFox 54（なぜそんなに時代遅れなのか聞かないでください）、IE 11、Edge 42、Safariをチェックアウトしました?? （1分間借りて、バージョンをチェックアウトするのを忘れました）。 ChromeとVivaldiのみがそのような疑似マージンを持っています（Operaのように、すべてのChromiumベースのブラウザーも同様です）。
それらの擬似マージンのサイズは？これを理解するには、ズームされたチェックボックスを使用できます。
input {
zoom: 10;
box-shadow: 0 0 1px inset #999;
}<input type=checkbox>私の結果は、幅/高さの約7％であり、したがって絶対単位で0.9-1.0pxです。ただし、精度に疑問がある場合があります。チェックボックスにzoomの異なる値を試してください。 ChromeとVivaldiの両方のテストでは、zoomの値が10、20、および値が11〜19（??）の場合、疑似マージンの相対的なサイズは大きく異なります。
scaleはより一貫しているようです：
input {
transform: scale(10) translate(50%, 50%);
box-shadow: 0 0 1px inset #999;
}<input type=checkbox>したがって、おそらく〜14％と2pxが正しい値です。
擬似マージンのサイズがわかったので、これでは十分ではないことに注意しましょう。チェックボックスアイコンのサイズはすべてのブラウザーで同じですか？ああ！スタイル設定されていないチェックボックスに対してDOMインスペクターが表示する内容は次のとおりです。
- FireFox：13.3px
- クロムベース：12.8px全体、したがって12.8（100％-14％）=11pxチェックボックスとして視覚的に認識されるもの
- IE 11、エッジ：13px
- Safari：該当なし（これらは同じ画面で比較する必要があると思います）
解決策やトリックについて説明する前に、correctアライメントとは何ですか？私たちは何を達成しようとしていますか？ある点までは好みの問題ですが、基本的には次の「ナイス」アライメントの側面を考えることができます。
同じベースライン上のテキストとチェックボックス（ここではチェックボックスのサイズを意図的に調整しません）：
または小文字の点で同じ中央線を持っています：
または大文字の点で同じ中間行（異なるフォントサイズの違いを見やすくする）：
また、チェックボックスのサイズを小文字、大文字、またはその他の文字（大きい、小さい、または小文字と大文字の間）の高さと等しくするかどうかを決定する必要があります。
この説明では、チェックボックスがテキストと同じベースライン上にあり、大文字のサイズ（非常に議論の余地のある選択肢）である場合、配置Niceを呼び出しましょう。
次に、どのツールを使用する必要がありますか：
- チェックボックスのサイズを調整する
- 擬似マージンチェックボックスでChromiumを認識し、特定のスタイルを設定します
- チェックボックス/ラベルの垂直方向の配置を調整します
？
チェックボックスサイズの調整 ：
width、height、size、zoom、scaleがあります（何か見逃していませんか？ ）。zoomおよびscaleは絶対サイズの設定を許可しないため、クロスブラウザーサイズを設定するのではなく、テキストサイズに調整する場合にのみ役立つ場合があります（ブラウザー固有のルールを記述できない場合）。sizeはChromeでは機能しません（古いIEでも機能しましたか？とにかく、それほど面白くありません）。widthおよびheightはChromeおよび他のブラウザーで動作するため、共通のサイズを設定できますが、Chromeで全体のサイズを設定しますチェックボックス自体ではなく画像。注：チェックボックスのサイズを定義するのはminimum（width、height）です（幅≠高さの場合、チェックボックスの正方形の外側の領域が「疑似マージン」に追加されます）。残念なことに、Chromeチェックボックスの擬似マージンは、私が見る限り、幅と高さについてゼロに設定されていません。
信頼できる CSSのみの方法 最近はないのではないかと心配しています。
垂直方向の配置を考えてみましょう。
vertical-alignは、middleまたはbaselineに設定した場合、すべてのブラウザで同じ「座標系」を取得する唯一の本当のオプションであるため、一貫した結果を得ることができません。ラベルと入力をtopに揃えるには：![comparing vertical-align: top and bottom]()
（画像上：垂直方向の整列：ボックスシャドウなしの上部、下部、下部）
では、これからどのような結果が得られますか？
input[type="checkbox"] {
height: 0.95em;
width: 0.95em;
}
label, input {
vertical-align: top;
}<label><input type="checkbox">label</label>上記のスニペットはChrome（Chromiumベースのブラウザー）で機能しますが、他のブラウザーではチェックボックスのサイズを小さくする必要があります。 Chromiumのチェックボックス画像の癖を回避する方法でサイズと垂直方向の配置の両方を調整することは不可能のようです。 最後の提案は、代わりにカスタムのチェックボックスを使用することです。フラストレーションを避けることができます：）
チェックボックスの高さと幅をハードコードし、その余白を取り除き、その高さと垂直方向の余白をラベルのline-heightと等しくします。ラベルテキストがインラインの場合は、チェックボックスを浮かせます。 Firefox、Chrome、およびIE7 +はすべて、次の例を同じようにレンダリングします。 http://www.kornea.com/css-checkbox-align
Twitter Bootstrapを使用している場合は、<label>にcheckboxクラスを使用するだけです。
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
入力タイプのチェックボックスがラベルの内側にラップされ、左に浮いているように：
<label for="id" class="checkbox">
<input type="checkbox" id="id">
<span>The Label</span>
</label>
これは私のために働いた：
label.checkbox {
display: block;
}
.checkbox input {
float: left;
height: 18px;
vertical-align: middle;
}
.checkbox span {
float: left;
line-height: 18px;
margin: 0 0 0 20px;
}
の高さが（blocklevel）のline-heightと同じであることを確認してください。
input[type=checkbox]
{
vertical-align: middle;
} <input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>私はたいていチェックボックスをラベルなしのままにしてから、その「ラベル」を別の要素にします。これは面倒ですが、チェックボックスとそのラベルの表示方法にはブラウザ間の違いが大きいため（これまで見てきたように）、これがすべての外観を制御する方法に近づく唯一の方法です。
私はまた、同じ理由で、これをwinformsの開発でも行います。チェックボックスコントロールの根本的な問題は、それが実際には2つの異なるコントロール、つまりボックスとラベルであるということです。チェックボックスを使用することで、コントロールの実装者に任せて、これら2つの要素をどのように並べて表示するかを決定できます（そして間違った場合は間違っています。
誰かがあなたの質問により良い答えを出してくれることを本当に願っています。
それで私はこれが何度も答えられたことを知っています、しかし私は私がすでに提供されたものよりはるかに上品な解決策を持っていると感じます。そして1つの優雅な解決策だけでなく、あなたの空想をくすぐるための2つの別々の解決策。そうは言っても、あなたが知る必要がある全てはコメント付きで2つのJS Fiddleに含まれています。
解決策＃1は与えられたブラウザのネイティブの「チェックボックス」に依存していますが、クロスブラウザを配置するのがより簡単なdivに含まれています。オーバーフローがある場合は隠されます。 （これはあなたがFFの醜い境界線を見ることができないのでそうです）
単純なHTML： （コメント付きのCSSをレビューするためのリンクをたどる、コードブロックはstackoverflowを満たすことです） http://jsfiddle.net/KQghJ/
<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>
解決策2では、「Checkbox Toggle Hack」を使用して、ブラウザ間で適切に配置されているDIVのCSS状態を切り替え、チェックボックスをオフにしてチェック状態を単純なSpriteで設定します。必要なのは、前述のCheckbox Toggle Hackで背景の位置を調整することだけです。私の考えでは、これはチェックボックスとラジオをより細かく制御できるため、よりエレガントなソリューションであり、ブラウザ間で見た目が同じになることを保証できます。
単純なHTML： （コメント付きでCSSをレビューするにはリンクをたどり、コードブロックはStackOverflowを満たすことです） http://jsfiddle.net/Sx5M2/ /
<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>
誰かがこれらの方法に賛成しないならば、私にコメントを残してください、なぜ他の人がこれらの解決策に出くわさなかったか、または彼らが持っているなら、なぜ私はここでそれらに関して答えを見ませんか？誰かがこれらのメソッドの1つが失敗するのを見れば、それも見るのはいいことですが、これらは最新のブラウザでテストされ、非常に古いHTML/CSSメソッドに頼っています。
CSS：
.threeCol .listItem {
width:13.9em;
padding:.2em;
margin:.2em;
float:left;
border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
float:left;
width:auto;
margin:.2em .2em .2em 0;
border:none;
background:none;
}
.threeCol label {
float:left;
margin:.1em 0 .1em 0;
}
HTML：
<div class="threeCol">
<div class="listItem">
<input type="checkbox" name="name" id="id" value="checkbox1" />
<label for="name">This is your checkBox</label>
</div>
</div>
上記のコードはあなたのリストアイテムをthreecolsに入れて幅に合わせて変更します。
次の例では、IE9でも、ブラウザ間でピクセル単位の一貫性が保たれます。
このアプローチは、明白になるという点では、かなり賢明です。
- 入力とラベルを作成します。
- それらをブロックとして表示するので、好きなように浮かべることができます。
- Heightとline-heightを同じ値に設定して、それらが中央に配置され、垂直に整列するようにします。
- em 測定では、要素の高さを計算するために、ブラウザはそれらの要素のフォントの高さを知っている必要があり、それ自体をem測定で設定してはいけません。
これにより、グローバルに適用可能な一般規則が得られます。
input, label {display:block;float:left;height:1em;line-height:1em;}
フォーム、フィールドセット、または要素ごとにフォントサイズを変更できます。
#myform input, #myform label {font-size:20px;}
Mac、Windows、iPhone、およびAndroid上の最新のChrome、Safari、およびFirefoxでテスト済み。IE9。
この方法は、1行のテキストを超えないすべての入力タイプに適用できる可能性があります。適切な型規則を適用してください。
はい、ありがとうございます。これも私を永遠に追いやっています。
私の特定のケースでは、これは私のために働きました：
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: top;
position: relative;
*top: 1px;
*overflow: hidden;
}
label {
display: block;
padding: 0;
padding-left: 15px;
text-indent: -15px;
border: 0px solid;
margin-left: 5px;
vertical-align: top;
}
私はreset.cssを使用していますが、これはいくつかの違いを説明するかもしれませんが、これは私にはうまくいくようです。
position: relative;は、j-indexのslideUp/slideDownのようなz-indexとアニメーションのIEにいくつか問題があります。
CSS：
input[type=checkbox], input[type=radio] {
vertical-align: baseline;
position: relative;
top: 3px;
margin: 0 3px 0 0;
padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
vertical-align: middle;
position: static;
margin-bottom: -2px;
height: 13px;
width: 13px;
}
jQuery：
$(document).ready(function () {
if ($.browser.msie && $.browser.version <= 7) {
$('input[type=checkbox]').addClass('ie7');
$('input[type=radio]').addClass('ie7');
}
});
<label>で使用されているフォントサイズに応じて、スタイリングはおそらく微調整が必要です。
シモンズ：
IE6でCSSを機能させるために ie7js を使用します。
<fieldset class="checks">
<legend>checks for whatevers</legend>
<input type="" id="x" />
<label for="x">Label</label>
<input type="" id="y" />
<label for="y">Label</label>
<input type="" id="z" />
<label for="z">Label</label>
</fieldset>
とにかく、あなた自身のフィールドセットで一緒にグループ化されたフォームコントロールを包むべきです、ここでは、それはラッパを果たしています。入力/ラベルの設定表示：ブロック、入力フロート左、ラベルフロート右、幅の設定、左右の余白を使用した間隔の調整、ラベルテキストの位置合わせ
そう
fieldset.checks {
width:200px
}
.checks input, .checks label {
display:block;
}
.checks input {
float:right;
width:10px;
margin-right:5px
}
.checks label {
float:left;
width:180px;
margin-left:5px;
text-align:left;
text-indent:5px
}
クロスブラウザ/メディアソリューションの場合は、おそらく両方ともボーダー、アウトライン、行の高さを設定する必要があります。
多分何人かの人々が私がしたのと同じ間違いをしている？入力ボックスの幅は主に 'text'であるため、その幅を上書きするのを忘れていました。そのため、私のチェックボックスは余分な幅の多くを占めようとしましたラベルを横に並べるのは大変でした。
.checkboxlabel {
width: 100%;
vertical-align: middle;
}
.checkbox {
width: 20px !important;
}
<label for='acheckbox' class='checkboxlabel'>
<input name="acheckbox" id='acheckbox' type="checkbox" class='checkbox'>Contact me</label>
（クラスセレクタを使用して）IE 6までのクリック可能なラベルと適切な配置をFirefox、Safari、およびChromeの最新バージョンで提供します。
これは、問題を解決するための最良の方法ではありません。
vertical-align: middle
入力ボックスにstyle="position:relative;top:2px;"を追加すると、2pxの下に移動します。だからあなたのフォントサイズに応じて、あなたはそれを一緒に移動することができます。
簡単な解決策：
<label style="display:block">
<input style="vertical-align:middle" type="checkbox">
<span style="vertical-align:middle">Label</span>
</label>
Chrome、Firefox、 IE9 +、Safari、iOS 9+でテスト済み
私はそれらを整列させることができる唯一の方法が入力のために絶対位置を使うことであることがわかった。 inputの一番上の変数で遊んでみたところ、私は望んだ結果が得られました。
div {
clear: both;
float: none;
position: relative;
}
input {
left: 5px;
position: absolute;
top: 3px;
}
label {
display: block;
margin-left: 20px;
}