Question

我见过如下的视觉设计：

enter image description here

基本上它是一个复选框（左边是标签，样式边框和所有......）用作过滤器。我不想重新发明轮子，但经过半天的谷歌搜索，我发现这个设计没有任何合适或接近。第一个障碍是将标签移到左侧，通常在右侧。此外，如果使用纯CSS，样式是非常痛苦的。

所以我会请求你的帮助，请你提供一些想法？任何想法都会有所帮助。提前谢谢！

Answer 1

您可以使用仅限CSS ，使用常规checkbox和label而不使用包装或图像来执行此类操作强>或其他任何东西。虽然不完全像你在那些图像中那样。

* { box-sizing: border-box; } input[type=checkbox] { display: none; } label { position: relative; margin: 4px; padding: 0px 0px 0px 8px; display: inline-block; cursor: pointer; border: 1px solid #ccc; border-radius: 5px; font-family: helvetica, sans-serif; } label::after { content: '\2713'; padding: 8px; margin-left: 8px; display: inline-block; border: 1px solid transparent; border-left: 1px dashed #ccc; } input[type=checkbox]:checked + label { border: 1px solid #4575ab; color: #4575ab; } input[type=checkbox]:checked + label::after { border: 1px solid #fff; border-top-right-radius: 7px; border-bottom-right-radius: 7px; background-color: #4575ab; color: #fff; }

<br /><br /> <input id="chk1" type="checkbox" /><label for="chk1">Category 1</label> <input id="chk2" type="checkbox" /><label for="chk2">Category 2</label> <input id="chk3" type="checkbox" /><label for="chk3">Category 3</label>

更新

这是另一个与你问题中的图像更接近的图像。同样，不需要使用任何图像。而且，非常简洁的代码。现在，双击时也会处理选择问题。

代码段2：

* { box-sizing: border-box; } input[type=checkbox] { display: none; } label { position: relative; height: 38px; line-height: 36px; margin: 4px; padding: 0px 4px 0px 8px; display: inline-block; cursor: pointer; border: 1px solid #aaa; border-radius: 5px; font-family: helvetica, sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } label::before { content: ''; position: absolute; top: 0px; right: 32px; height: 36px; width: 2px; border-left: 1px solid #aaa; } label::after { content: '\2713'; text-align: center; margin-left: 12px; display: inline-block; border-radius: 4px; border: 1px dashed #999; height: 26px; line-height: 26px; width: 24px; } input[type=checkbox]:checked + label { border: 1px solid #4575ab; color: #4575ab; } input[type=checkbox]:checked + label::after { border: 1px solid #4575ab; background-color: #4575ab; color: #fff; } input[type=checkbox]:checked + label::before { border-left: 1px solid #4575ab; }

<br /><br /> <input id="chk1" type="checkbox" /><label for="chk1">Category 1</label> <input id="chk2" type="checkbox" checked /><label for="chk2">Category 2</label> <input id="chk3" type="checkbox" /><label for="chk3">Category 3</label>

演示小提琴：http://jsfiddle.net/abhitalks/mxkqq4Lg/3/

Answer 2

我会为每件事创建DIV容器......

像

<div class="option">
  <div class="label">Category 1</div>
  <div class="box">&nbsp;</div>
  <input type="checkbox" name="cb" value="category_1" class="hidden" />
</div>

通过css隐藏复选框，通过css为方框设置样式。

通过jQuery，您可以处理点击次数

$('.option').click(function() {
  if($(this).hasClass("checked") {
    $(this).removeClass("checked");
  } else {
    $(this).addClass("checked");
  }
  $(this).find("input[type=checkbox]").click();
});

在CSS中执行以下操作：

.option .box { background-image: url('unchecked.jpg'); }
.option.checked .box { background-image: url('checked.jpg'); }

注意：未经测试，只是一些想法

Answer 3

我认为这非常接近你的截图。 Here's a fiddle as well

body {
    font-family: sans-serif;
}

input[type="checkbox"] {
    display: none;
}

.checkbox {
    position: relative;
    display: inline-block;
    border: 1px solid #aaa;
    padding: 10px 52px 8px 12px;
    border-radius: 5px;
    color: #888;
    font-weight: 100;
    cursor: pointer;
    margin-bottom: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox::before {
    content: '';
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 37px;
    width: 1px;
    background-color: #aaa;
}

.checkbox::after {
    position: absolute;
    top: 0px;
    right: 0px;
    content: '';
    float: left;
    width: 26px;
    height: 26px;
    margin: 4px;
    border: 1px dashed #aaa;
    border-radius: 3px;
    background-image: url(http://dev.instinkt.dk/checkmark.png);
    background-size: 26px 52px;
    background-position: center top;
    background-repeat: no-repeat;
}

input[type="checkbox"]:checked + .checkbox {
    border: 1px solid #4575ab;
    color: #4575ab;
}

input[type="checkbox"]:checked + .checkbox::before {
    background-color: #4575ab;
}

input[type="checkbox"]:checked + .checkbox::after {
    border: 1px solid #4575ab;
    background-color: #4575ab;
    background-position: center bottom;
}

<input id="mycheckbox1" type="checkbox">
<label class="checkbox" for="mycheckbox1">Custom checkbox</label>
<br>
<input id="mycheckbox2" type="checkbox" checked>
<label class="checkbox" for="mycheckbox2">Custom checkbox</label>

如何创建带有左侧标签的复选框和样式

3 个答案:

更新