html - template - 如何使復選框及其標籤一致地跨瀏覽器




pure form css (20)

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>

上面的代碼會將你的列表項放置在三個區域中,並且只是改變寬度以適應。

這是不斷困擾著我的小CSS問題之一。 堆棧溢出人員如何垂直對齊checkboxes及其labels 跨瀏覽器 ? 每當我在Safari中正確對齊它們(通常在input上使用vertical-align: baseline )時,它們在Firefox和IE中完全關閉。 在Firefox中修復它,Safari和IE無可避免地搞砸了。 每次我編寫表單時,我都會浪費時間。

以下是我使用的標準代碼:

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

我通常使用埃里克邁耶的重置,所以表單元素相對乾淨的覆蓋。 期待您提供的任何提示或技巧!


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來使IE6中的CSS工作。


似乎很好用的一個簡單的事情是應用垂直對齊來調整復選框的垂直位置。 它在各個瀏覽器中仍然會有所不同,但解決方案並不復雜。

input {
    vertical-align: -2px;
}

Reference


使用包裝在標籤內的輸入類型複選框並像這樣浮動到左側:

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

確保其高度與(塊級別)的行高一致。


嘗試vertical-align: middle

你的代碼看起來應該是這樣的:

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


在Chrome 28 OSX中,選擇的答案與400 + upvotes不適用於我,可能是因為它沒有在OSX中進行過測試,或者它在2008年解決此問題時出現了任何問題。

時代已經改變,新的CSS3解決方案現在可行。 我的解決方案使用pseudoelements來創建自定義復選框 。 所以這些規定(正面或反面,但你看它)如下:

  • 只適用於現代瀏覽器(FF3.6 +,IE9 +,Chrome,Safari)
  • 依賴於自定義設計的複選框,在每個瀏覽器/操作系統中都將呈現完全相同的複選框。 在這裡,我只是選擇了一些簡單的顏色,但是您可以添加線性漸變等,使其更具爆炸性。
  • 面向特定的字體/字體大小,如果更改,您只需更改複選框的位置和大小以使其顯示為垂直對齊。 如果調整得當,所有瀏覽器/操作系統的最終結果仍應該接近完全相同。
  • 沒有垂直對齊屬性,沒有浮動
  • 在我的例子中,必須使用提供的標記,如果結構像問題那樣,它將不起作用,但是佈局基本上看起來是一樣的。 如果你想要移動東西,你還必須移動關聯的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/SgXYY/6/

如果你有興趣,這是我對單選按鈕的看法: http://jsfiddle.net/DtKrV/2/ : http://jsfiddle.net/DtKrV/2/

希望有人認為這有用!


如果您使用的是Twitter Bootstrap,則可以使用<label>上的checkbox類:

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

對我來說,唯一完美的解決方案是:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

今天在Chrome,Firefox,Opera,IE 7和8測試過。例如: Fiddle


從一個蠟筆小新的解決方案中脫穎而出,我有一些適合我的東西,而且更簡單:

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>

在Safari中渲染像素對像素相同(我的基準值得信任),Firefox和IE7都檢出效果不錯。 它也適用於各種標籤字體大小,大小。 現在,為了修復IE的選擇和輸入的基準...


我不喜歡相對定位,因為它使得元素在其級別上高於其他所有元素(如果你有復雜的佈局,它可以得到最多的東西)。

我發現vertical-align: sub使復選框在Chrome,Firefox和Opera中看起來足夠好。 因為我沒有MacOS,IE10稍微關閉,所以無法檢查Safari,但是我發現它對我來說足夠好。

另一種解決方案可能是嘗試為每個瀏覽器製作特定的CSS,並使用%/像素/ EM中的某些垂直對齊方式對其進行微調: http://css-tricks.com/snippets/css/browser-specific-hacks/ : http://css-tricks.com/snippets/css/browser-specific-hacks/


我認為這是最簡單的方法

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

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的平行版):


所以我知道這已經被回答了很多次,但我覺得我有一種比已經提供的更優雅的解決方案。 不僅有1個優雅的解決方案,而且還有2個獨立的解決方案來撩撥你的幻想。 有了這個說法,你需要知道和看到的所有內容都包含在JS Fiddle的2條評論中。

解決方案#1依賴於給定瀏覽器的原生“複選框”,儘管有扭曲......它包含在一個更容易定位跨瀏覽器和溢出的div中:隱藏可以將多餘的1px拉伸複選框(這是你不能看到FF的醜陋邊界)

簡單的HTML:( 按照鏈接來評論與評論的CSS,代碼塊是滿足) http://jsfiddle.net/KQghJ/

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

解決方案#2使用“複選框切換黑客”來切換DIV的CSS狀態,該狀態已經在瀏覽器中正確定位,並且用複選框的簡單精靈設置未選中狀態和已選中狀態。 所有需要的是用上述Checkbox Toggle Hack來調整背景位置。 在我看來,這是更優雅的解決方案,因為您可以更好地控制複選框和收音機,並且可以保證它們在不同瀏覽器中看起來相同。

簡單的HTML:( 按照鏈接評論CSS的評論,代碼塊是滿足) http://jsfiddle.net/Sx5M2/

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

如果有人不同意這些方法,請留下我的評論,我很想听聽一些關於為什麼其他人沒有遇到這些解決方案的反饋,或者如果他們有,為什麼我在這裡看不到他們的答案? 如果任何人看到其中一種方法失敗,那麼也很高興看到這些方法,但是這些方法已經在最新的瀏覽器中進行過測試,並且依賴於HTML / CSS方法,這些方法相當古老,並且據我所見是普遍的。


有時垂直對齊需要兩個內聯(span,label,input等)元素相互靠近才能正常工作。 以下複選框在IE,Safari,FF和Chrome中正確垂直居中,即使文本大小非常小或很大。

它們都在同一行上彼此相鄰,但now​​rap意味著整個標籤文本總是停留在復選框旁邊。

缺點是額外無意義的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>


正如pokrishka已經建議的那樣,簡單地使用vertical-align: sub

Fiddle

HTML代碼:

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

CSS代碼:

.checkboxes input {
    vertical-align: sub;
}

耶感謝! 這也一直讓我瘋狂。

在我的特殊情況下,這對我有效:

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這可能解釋一些差異,但這似乎對我很好。


試試我的解決方案,我在IE 6,FF2和Chrome中試用了它,它在所有三種瀏覽器中逐像素渲染。

* {
  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]
{
    vertical-align: middle;
} 
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>


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

無論如何,您應該將自己的字段集中的表單控件包裝在一起,在這裡,它會播放wrappa。 設置輸入/標籤做顯示:塊,輸入浮動左邊,標籤浮動右邊,設置你的寬度,用左/右邊距控制間距,相應地對齊標籤文本。

所以

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
}

您可能需要為跨瀏覽器/媒體解決方案設置邊框,輪廓和線條高度。





html-form