CSS复选框样式

Question

我正在设计CSS复选框样式。事情看起来很不错，但我有一个问题。如果框标签是大量文本，则框最终不一致对齐。

我如何更改下面的代码，使复选框位于文本的左侧，以便一致？

这是一个JSFiddle：https://jsfiddle.net/7295tvp0/

＆＃13;

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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重写代码。

您可以在不更改标记的情况下实现此目的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者使用标记更改，在复选框图标（推荐方式）之后放置文本：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试span.bigcheck-target{float:left;}

并删除：span.bigcheck-target:margin-top: 20px!important;

Answer 4

首先，您的HTML需要一些重做。使用div元素创建行。提供input元素id值，然后使用label元素，以便他们不必使用input属性包装这些for元素。

然后，只需为标签设置统一宽度：

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