常にクロスブラウザでチェックボックスとそのラベルを揃える方法

https://stackoverflow.com/questions/306252

08-07-2019
|

質問

これは、私を常に悩ませているCSSの小さな問題の1つです。スタックオーバーフローの周りの人々は、 checkboxes とその labels を常に cross-ブラウザ？ Safariで（通常はvertical-align: baselineでinputを使用して）正しく配置すると、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と非常によく似た動作になります。
テキストのサイズに応じて、見た目を正しくするために相対的な位置、幅、高さなどを調整する必要があることは間違いありません。

これが他の誰かに役立つことを願っています！私は今朝取り組んでいたプロジェクト以外でこの特定のテクニックを試したことはありませんので、より一貫して機能するものを見つけたら、ぜひ試してください。

他のヒント

vertical-alignが適切に機能するためには、2つのインライン（スパン、ラベル、入力など）要素が隣り合っている必要がある場合があります。次のチェックボックスは、テキストサイズが非常に小さい場合でも大きい場合でも、IE、Safari、FF、Chromeで適切に垂直方向の中央に配置されます。

これらはすべて同じ行で互いに隣り合っていますが、nowrapはラベルテキスト全体が常にチェックボックスの隣に留まることを意味します。

欠点は、余分な無意味なSPANタグです。

.checkboxes label {
  display: inline-block;
  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;
  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 so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</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>

1つのクレヨンのソリューションを使用して、私にとって役立つ、よりシンプルなものがあります：

.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とIE7の両方が良好であると確認します。また、さまざまなラベルフォントサイズ（大小）で機能します。現在、選択と入力に関するIEのベースラインを修正するために...

更新：（サードパーティ編集）

適切なbottom位置は、font-familyとfont-sizeに依存します！チェックボックス<！> ampに bottom: .08em; を使用していることがわかりました。ラジオ要素は一般的な価値があります。 Arial <！> ampを使用して、WindowsのChrome / Firefox / IE11でテストしました。いくつかの小/中/大のフォントサイズを使用するCalibriフォント。

.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でテスト済み。例： フィドル

通常、静的テキストの垂直位置を調整するために行の高さを使用します：

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もvertical-align: top;にし、vertical-align: bottom;を次のように割り当てます。

編集： IEのテスト後、入力に<=>を追加し、ラベルの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の類似点を使用していることをおaびします）：

チェックボックスのスクリーンショット：Chrome チェックボックスのスクリーンショット：IE

これが最も簡単な方法だと思います

input {
    position: relative;
    top: 1px;
}

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

これは私にとってはうまくいきます：

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>

私は相対的な配置が好きではありません。なぜなら、要素をそのレベルの他のすべての上にレンダリングするからです（複雑なレイアウトを持っている場合、何かの上に乗ることができます）。

vertical-align: subを使用すると、Chrome、Firefox、Operaでチェックボックスが十分に整列して表示されることがわかりました。 MacOSがなく、IE10が少しオフになっているため、Safariをチェックできませんが、私にとっては十分な解決策であることがわかりました。

別の解決策は、すべてのブラウザーに特定のCSSを作成して、％/ pixels / EMsの垂直方向に調整することです。 http://css-tricks.com/snippets/css/browser-specific-hacks/

フレックスボックスがすべての最新ブラウザーでサポートされるようになったので、このようなことは私にとってより簡単なアプローチのように思えます。

<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>

このようにして問題が発生したことはありません。

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

ラベルの「for」属性に関する議論に少しだけ追加したかった（少しオフトピック）：

必要ではない場合でも、javascriptから使用するのが非常に便利なので、提供してください：

var label = ...
var input = document.getElementById(label.htmlFor);

それは、ラベルに入力がネストされているか、入力がラベルの前にあるのか、後にあるのかなどを把握するよりもはるかに便利です。 >

ちょうど2セント。

ASP.NET Web Forms を使用する場合、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>

Chrome 28 OSXでは、400以上の賛成票で選択した回答が機能しませんでした。おそらく、OSXでテストされていないか、この質問が回答された2008年頃に機能したためです。

時代は変わり、新しいCSS3ソリューションが実現可能になりました。私のソリューションは、擬似要素を使用して、カスタムチェックボックスを作成します。そのため、規定（賛否両論、ただしあなたがそれを見ている）は次のとおりです。

最新のブラウザ（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 /

誰かがこれが便利だと思ってください！

Twitter Bootstrapを使用している場合は、checkboxで<label>クラスを使用できます：

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

チェックボックスの高さと幅をハードコードし、パディングを削除し、その高さと垂直マージンをラベルの行の高さと等しくします。ラベルテキストがインラインの場合、チェックボックスをフロートします。 Firefox、Chrome、およびIE7 +はすべて、次の例を同じようにレンダリングします。 http://www.kornea.com/ css-checkbox-align

<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>

トリックは、ラベルのタグを使用している場合、表のセルまたはインラインブロックでのみ垂直方向に配置することです。

入力タイプのチェックボックスがラベル内にラップされ、次のように左にフロートしました。

<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;
}

の高さが（ブロックレベル）の行の高さと同じであることを確認します。

input[type=checkbox]
{
    vertical-align: middle;
}

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

最後に問題の原因を見てみましょう

チェックボックスは画像を使用してレンダリングされます（CSSを介してカスタム設定できます）。 FireFoxの（チェックされていない）チェックボックスは、DOMインスペクターで強調表示されています：

そして、これはChromeの同じスタイルのないチェックボックスです：

マージン（オレンジ）を確認できます。パディングは存在しません（緑色で表示されます）。では、チェックボックスの右側と下部にあるこの擬似マージンは何ですか？ これらは、チェックボックスに使用される画像の一部です。そのため、単にvertical-align: middleを使用するだけでは十分ではなく、それがクロスブラウザの問題の原因になります。

では、これについて何ができますか？

1つの明白なオプションは<！>＃8211です。画像を交換してください！幸いなことに、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>

こちらに記載されているようなスタイルに関する詳細な記事をご覧ください。この回答の範囲外です。

OK、それでもno-custom-images-or-pseudo-elementsソリューションはどうですか？

TL; DR：これは機能しないようです。代わりにカスタムチェックボックスを使用してください

最初に、他のブラウザでチェックボックスアイコン内のこれらの擬似マージンが任意である場合、一貫した解決策がなかったことに注目しましょう。ビルドするには、既存のブラウザーでそのような画像の構造を調べる必要があります。

では、どのブラウザのチェックボックスに擬似マージンがあるのですか？ 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の両方のテストでは、疑似マージンの相対サイズはscale値10、20および値11-19（??）で非常に異なります：

widthはより一貫しているようです：

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

したがって、おそらく〜14％と2pxが正しい値です。

擬似マージンのサイズがわかった（？）ので、これでは十分ではありません。チェックボックスアイコンのサイズはすべてのブラウザーで同じですか？ああ！スタイル設定されていないチェックボックスに対してDOMインスペクターが表示する内容は次のとおりです。

FireFox： 13.3px
クロムベース：全体で 12.8px 、したがって12.8（100％-14％）= 11px チェックボックスとして視覚的に認識されるもの
IE 11、エッジ： 13px
Safari：該当なし（これらは同じ画面で比較する必要があると思います）

解決策やトリックについて説明する前に、正しいアライメントとは何ですか？私たちは何を達成しようとしていますか？ある点までは好みの問題ですが、基本的には次の<！> quot; nice <！> quot;を考えることができます。線形の側面：

同じベースラインのテキストとチェックボックス（ここではチェックボックスのサイズを意図的に調整しません）：

または小文字の点で同じ中間行がある：

または大文字の点で同じ中間行（異なるフォントサイズの違いを見やすくする）：

また、チェックボックスのサイズを小文字、大文字、またはその他の文字（より大きな、より小さい、または小文字と大文字の間）の高さと等しくするかどうかを決定する必要があります。

この説明では、チェックボックスがテキストと同じベースライン上にあり、大文字のサイズを持っている場合（非常に議論の余地のある選択肢）、配置をいいとしましょう：

今、どのツールが必要ですか：

チェックボックスのサイズを調整
Chromiumを擬似マージンチェックボックスで認識し、特定のスタイルを設定します
チェックボックス/ラベルの垂直方向の配置を調整

？

チェックボックスのサイズ調整について：height、size、vertical-align、 middle、baseline（何か見落としていませんか？）。 topおよび<=>は絶対サイズの設定を許可しないため、ブラウザサイズを設定するのではなく、テキストサイズに調整する場合にのみ役立つ場合があります（ブラウザ固有のルールを記述できない場合）。 <=>はChromeでは動作しません（古いIEでも動作しましたか？とにかく、それほど面白くありません）。 <=>および<=>は、Chromeおよび他のブラウザーで機能するため、共通のサイズを設定できますが、Chromeでは、チェックボックス自体ではなく画像全体のサイズを設定します。注：チェックボックスのサイズを定義するのはminimum（width、height）です（幅<！>＃8800; heightの場合、チェックボックスの四角の外側の領域が<！> quot; pseudo-margin <！> quot;に追加されます）。

残念なことに、私が見る限り、Chromeの擬似マージンのチェックボックスは幅と高さに対してゼロに設定されていません。
信頼できる CSSのみの方法は最近ありません。
垂直方向の配置を考えてみましょう。 <=>または<=>に設定した場合、Chromeの擬似マージンのため、同じ<！> quot; coordinate system <！> quotを取得する唯一の実際のオプションのため、一貫した結果を得ることができません。すべてのブラウザで、ラベルと入力を<=>：
に揃えることです

（写真上：垂直方向の整列：ボックスシャドウなしの上部、下部、下部）

では、これからどのような結果が得られますか？

<label><input type="checkbox">label</label>

<*>

上記のスニペットはChrome（Chromiumベースのブラウザ）で動作しますが、他のブラウザではチェックボックスのサイズを小さくする必要があります。 Chromiumのチェックボックス画像の癖を回避する方法でサイズと垂直方向の配置の両方を調整することは不可能のようです。 最後の提案は、代わりにカスタムチェックボックスを使用することです<！>＃8211;フラストレーションを避けることができます：）

通常、チェックボックスにはラベルを付けずに、<！> quot; label <！> quot;別の要素。これは苦痛ですが、チェックボックスとそのラベルの表示方法（お気づきのとおり）にはブラウザー間で大きな違いがあるため、これがすべての外観を制御する唯一の方法です。

私も同じ理由で、これをwinforms開発で行っています。チェックボックスコントロールの基本的な問題は、ボックスとラベルという2つの異なるコントロールであるということです。チェックボックスを使用することで、コントロールの実装者に任せて、これらの2つの要素を隣り合わせて表示する方法を決定します（そして、常に間違ってしまいます。間違った=望むものではありません）。

あなたの質問に対して誰かがより良い答えを持っていることを本当に願っています。

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であっても、ブラウザー間でピクセル完璧な一貫性を提供します。

アプローチは非常に賢明で、明らかになるまで

入力とラベルを作成します。
ブロックとして表示するので、好きなようにフロートできます。
高さと行の高さを同じ値に設定して、中央に揃えて垂直に揃えるようにします。
em の測定では、要素の高さを計算するために、ブラウザはそれらの要素のフォントの高さを知っている必要があります。 em測定。

これにより、グローバルに適用可能な一般ルールが作成されます。

input, label {display:block;float:left;height:1em;line-height:1em;}

フォーム、フィールドセット、または要素ごとに適応可能なフォントサイズ。

#myform input, #myform label {font-size:20px;}

最新のChrome、Safari、およびFirefox on Mac、Windows、Iphone、およびAndroidでテスト済み。 IE9。

この方法は、1行のテキスト以下のすべての入力タイプに適用される可能性があります。タイプルールを適用します。

だから、これは何度も答えられていることは知っていますが、すでに提供されているものよりもはるかにエレガントな解決策があると感じています。そして、1つのエレガントなソリューションだけでなく、あなたの空想をくすぐる2つの別々のソリューション。そうは言っても、あなたが知り、見る必要があるものはすべて、コメント付きの2つのJSフィドルに含まれています。

ソリューション＃1は、ネイティブの<！> quot; Checkbox <！> quot;に依存しています。指定されたブラウザの、ひねりを加えた...クロスブラウザを配置するのが簡単なdivに含まれ、オーバーフロー：1pxのストレッチされたチェックボックスの過剰を切り取るために隠されています（これはthisい境界線を見ることができないためです） FF）

シンプルなHTML：（リンクをたどってコメント付きのCSSを確認します。コードブロックはstackoverflowを満たします） http://jsfiddle.net/KQghJ/

<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>

Solution＃2は<！> quot; Checkbox Toggle Hack <！> quot;を使用します。ブラウザ全体に適切に配置されたDIVのCSS状態を切り替え、チェックボックスのチェックを外した状態とチェックした状態の単純なスプライトを設定します。必要なのは、前述のチェックボックストグルハックでバックグラウンド位置を調整することだけです。私の意見では、これはチェックボックス<！> amp;をより細かく制御できるため、よりエレガントなソリューションです。ラジオ、およびブラウザ間で同じように見えることを保証できます。

シンプルなHTML：（リンクをたどってコメント付きでCSSを確認します。コードブロックはStackOverflowを満たします） http://jsfiddle.net/Sx5M2/

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

これらの方法に反対する人がいれば、コメントを残してください、他の人がこれらの解決策に出会わなかった理由についてのフィードバックを聞きたい、またはもしそうなら、なぜそれらについて答えがここに表示されないのですか？これらのメソッドのいずれかが失敗した場合は、それも見た方がいいでしょうが、これらは最新のブラウザでテストされており、私が見た限りでは非常に古く、普遍的なHTML / CSSメソッドに依存しています。

ありがとうございます！これも永遠に私を夢中にさせてきました。

私の特定の場合、これは私のために働いた：

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;にはIEでz-indexとjQueryのslideUp / slideDownなどのアニメーションに関する問題がいくつかあります。

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>

で使用されるフォントサイズに応じて、スタイルを調整する必要があります。

PS：
ie7js を使用して、CSSをIE6で動作させます。

pokrishka が既に提案しているように、単にvertical-align: subを使用します。

フィドル

HTMLコード：

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

CSSコード：

.checkboxes input {
    vertical-align: sub;
}

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow