1. 首页
  2. 问答
  3. CSS复选框样式

CSS复选框样式

2017-07-18 133 views
0

我正在处理样式CSS复选框。事情看起来不错，但我有一个问题。如果箱子标签上有很多文字，则这些箱子最终不一致。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>

来源

2017-07-18 AndrewLeonardi

回答

2

我想出了这个解决方案：

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>

来源

2017-07-18 00:53:53

0

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

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

来源

2017-07-18 00:56:43 NoCrc

0

首先，你的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>

来源

2017-07-18 01:04:11

0

把你的内容你的“输入”和“跨度”

，并从停止你的用户后，突出显示您的内容使用：

.bigcheck { user-select: none; }

来源

2017-07-18 01:11:13 Charles

1

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

来源

2017-07-18 05:16:49

相关问题

 相关问题