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