如何對齊複選框及其標籤始終跨瀏覽器

這是困擾個人CSS的小問題之一。 Stack Overflow周圍的人們如何垂直對齊checkboxes而且他們的labels始終跨瀏覽器 ? 每當我在Safari中正確對齊它們(一般在input上使用vertical-align: baseline )時,它們在Firefox和IE中就徹底關閉。 在Firefox中對其進行修復,不可避免地將Safari和IE弄亂了。 每次編寫表單時,我都會在此上浪費時間。 javascript

這是我使用的標準代碼: css

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

我一般使用Eric Meyer的重置,所以表單元素相對而言是覆蓋不大的。 期待您提供的任何提示或技巧! html


#1樓

只是想在標籤上添加關於'for'屬性的討論(略微偏離主題): java

即便沒有必要,請提供它,由於從javascript使用很是方便: 瀏覽器

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

這比試圖弄清楚標籤的輸入是否嵌套,或者輸入是在標籤以前,仍是以後......等等都要方便得多。並且它永遠不會傷害它。因此。 ide

只需2美分。 佈局


#2樓

若是您使用的是Twitter Bootstrap,則可使用<label>上的checkbox類: 測試

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

#3樓

我尚未徹底測試個人解決方案,可是它彷佛工做得很好。 字體

個人HTML很簡單: spa

<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; }
<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label> <label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label> <label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label> <label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

若是有人發現這行不通,請告訴我。 這是實際的操做(在Chrome和IE中-對屏幕截圖在視網膜上使用併爲IE使用並行表示歉意):

複選框的屏幕截圖:Chrome複選框的屏幕截圖:IE


#4樓

選擇的具備400多個投票的答案在Chrome 28 OSX中對我不起做用,多是由於它沒有在OSX中進行過測試,或者它在2008年回答該問題時均可以使用。

時代已經改變,新的CSS3解決方案如今是可行的。 個人解決方案使用僞元素建立自定義複選框 。 所以,規定(利弊),以下所示:

  • 僅適用於現代瀏覽器(FF3.6 +,IE9 +,Chrome,Safari)
  • 依賴於自定義設計的複選框,該複選框將在每一個瀏覽器/ OS中呈現徹底相同的外觀。 在這裏,我只是選擇了一些簡單的顏色,可是您老是能夠添加線性漸變,這樣可使它更加爆炸。
  • 適應特定的字體/字體大小,若是更改,您只需更改複選框的位置和大小以使其垂直對齊便可。 若是正確調整,最終結果在全部瀏覽器/操做系統中仍應接近徹底相同。
  • 沒有垂直對齊特性,沒有浮動
  • 在個人示例中必須使用提供的標記,若是結構像問題同樣,它將不起做用,可是,佈局本質上看起來是相同的。 若是要四處移動,還必須移動關聯的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; }
<form> <div class="checkbox"> <input id="check_me" type=checkbox /> <label for="check_me">Label for checkbox</label> </div> </form>

此解決方案將隱藏複選框 ,並在標籤上添加僞元素並設置其樣式,以建立可見的複選框。 因爲標籤與隱藏的複選框綁定在一塊兒,所以輸入字段仍將更新,而且值將與表單一塊兒提交。

若是您有興趣,這是我對單選按鈕的見解: http : //jsfiddle.net/DtKrV/2/

但願有人以爲這有用!


#5樓

我認爲這是最簡單的方法

input { position: relative; top: 1px; }
<form> <div> <label><input type="checkbox" /> Label text</label> </div> <form>
相關文章
相關標籤/搜索