如何創建帶有左側標簽和樣式的復選框

Question

我看過如下視覺設計：

基本上，它是一個復選框（在標簽的左側，帶有樣式邊框和所有...）用作過濾器。 我不想重新發明輪子，但是經過半天的谷歌搜索后，我發現這個設計不適合或接近。 第一個障礙是將標簽移到通常在右側的左側。 此外，如果使用純CSS，則樣式非常痛苦。

因此，我想請您幫忙，請您提供一些想法？ 任何想法都會有所幫助。 提前致謝！

Answer 1

您可以使用常規checkbox和label 僅使用CSS進行此類操作，而無需使用包裝器或圖像或其他任何東西。 盡管不完全像您在這些圖像中所顯示的那樣。

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

我認為這非常接近您的屏幕截圖。 這也是一個小提琴 。

 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>