CSS復選框樣式

Question

我正在設計CSS復選框的樣式。 情況看起來不錯，但我有一個問題。 如果框標簽包含大量文本，則框最終會不一致對齊。

我如何更改下面的代碼以使復選框位於文本的左側，以便保持一致？

這是一個JSFiddle： https ://jsfiddle.net/7295tvp0/

 span.bigcheck-target { font-family: FontAwesome; font-size: 1.2em; margin-top: 20px!important; } input[type='checkbox'].bigcheck { position: relative; left: -999em; font-size: 2em; } input[type='checkbox'].bigcheck + span.bigcheck-target:after { content: "\\f096"; } input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { content: "\\f046"; } span.bigcheck { display: block; font-size: 20px; } .bigcheck-target { position: relative } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <span class="bigcheck"> <label class="bigcheck">Short <input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/> <span class="bigcheck-target"></span> </label> </span> <span class="bigcheck"> <label class="bigcheck">Much longer name <input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/> <span class="bigcheck-target"></span> </label> </span> 

Answer 1

我想出了這個解決方案：

 span.bigcheck-target { font-family: FontAwesome; font-size: 1.2em; margin-top: 20px!important; } input[type='checkbox'].bigcheck { position: relative; left: -999em; font-size: 2em; } input[type='checkbox'].bigcheck + span.bigcheck-target:after { content: "\\f096"; } input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { content: "\\f046"; } span.bigcheck { display: block; font-size: 20px; } .bigcheck-target { position: relative } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <span class="bigcheck"> <label class="bigcheck"> <input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/> <span class="bigcheck-target"></span> <span> Short</span> </label> </span> <span class="bigcheck"> <label class="bigcheck"> <input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/> <span class="bigcheck-target"></span> <span>Much longer name</span> </label> </span> 

Answer 2

使用flexbox重寫了您的代碼。

您可以在不更改標記的情況下實現此目的：

 span.bigcheck-target { font-family: FontAwesome; font-size: 1.2em; /* space between icon and label */ margin-right: 5px; } input[type='checkbox'].bigcheck { /* don't show standard checkbox */ display: none; font-size: 2em; } input[type='checkbox'].bigcheck + span.bigcheck-target:after { content: "\\f096"; } input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { content: "\\f046"; } span.bigcheck { font-size: 20px; /* checkbox on every line */ display: block; } label.bigcheck { /* become inline flex-container */ display: inline-flex; /* center vertically every item */ align-items: center; /* inverse layout in row */ flex-direction: row-reverse; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <span class="bigcheck"> <label class="bigcheck">Short <input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/> <span class="bigcheck-target"></span> </label> </span> <span class="bigcheck"> <label class="bigcheck">Much longer name <input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/> <span class="bigcheck-target"></span> </label> </span> 

或通過更改標記，將文本放置在復選框圖標之后（推薦方式）：

 span.bigcheck-target { font-family: FontAwesome; font-size: 1.2em; /* space between icon and label */ margin-right: 5px; } input[type='checkbox'].bigcheck { /* don't show standard checkbox */ display: none; font-size: 2em; } input[type='checkbox'].bigcheck + span.bigcheck-target:after { content: "\\f096"; } input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { content: "\\f046"; } span.bigcheck { font-size: 20px; } label.bigcheck { /* become flex-container, putting checkbox on every line */ display: flex; /* center vertically every item */ align-items: center; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <span class="bigcheck"> <label class="bigcheck"> <input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/> <span class="bigcheck-target"></span> Short </label> </span> <span class="bigcheck"> <label class="bigcheck"> <input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/> <span class="bigcheck-target"></span> Much longer name </label> </span> 

Answer 3

嘗試span.bigcheck-target{float:left;}

並刪除： span.bigcheck-target:margin-top: 20px!important;

Answer 4

首先，您的HTML需要一些修改。 使用div元素創建行。 給您的input元素id值，然后使用label元素，這樣它們就不必使用for屬性包裝這些input元素。

然后，只需為標簽設置統一寬度：

 span.bigcheck-target { font-family: FontAwesome; font-size: 1.2em; margin-top: 20px!important; } input[type='checkbox'].bigcheck { font-size: 2em; } input[type='checkbox'].bigcheck + span.bigcheck-target:after { content: "\\f096"; } input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { content: "\\f046"; } label { font-size: 20px; display:inline-block; width:200px; } 

 <div> <label for="amenities1">Short</label> <input id="amenities1" name="amenities" value="wifi" type="checkbox" name="cheese" value="yes"> <span class="bigcheck-target"></span> </div> <div> <label for="amenities2">Much longer name</label> <input id="amenities2" name="amenities" value="personal_video" type="checkbox" name="cheese" value="yes"> <span class="bigcheck-target"></span> </div> 

Answer 5

將您的內容放在“輸入”和“跨度”之后

並阻止您的用戶突出顯示您的內容使用情況：

.bigcheck { user-select: none; }