没有标签文本时，如何避免标签在自定义复选框中折叠？

Question

我创建了一个自定义复选框，只要我有标签文本，它就可以按预期工作。 但是，当我删除标签文本并且只有复选框时，该行将折叠。 我尝试将.kx-selector的display属性设置为其他内容，但没有帮助。

在没有标签文本时如何避免行折叠？

See working example in CodePen。

我的代码：

* { box-sizing: border-box; }
body { margin: 10px; }

 .kx-selector {
	 display: flex;
	 align-items: center;
	 position: relative;
	 padding-left: 28px;
}
 .kx-selector input {
	 position: absolute;
	 z-index: -1;
	 opacity: 0;
}
 .kx-selector__indicator {
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 position: absolute;
	 left: 0;
	 height: 20px;
	 width: 20px;
	 border: solid 1px #71767a;
}
 .kx-selector input:checked ~ .kx-selector__indicator {
	 border-color: #007a8c;
	 background-color: #007a8c;
}
 .kx-selector input:checked ~ .kx-selector__indicator::before {
	 border-color: #f6f6f6;
}
 .kx-selector__checkbox .kx-selector__indicator {
	 border-radius: 3px;
}
 .kx-selector__checkbox .kx-selector__indicator:before {
	 display: none;
	 content: '';
	 position: absolute;
	 box-sizing: content-box;
	 left: 7px;
	 top: 3px;
	 width: 3px;
	 height: 9px;
	 border: solid #f6f6f6;
	 border-width: 0 2px 2px 0;
	 transform: rotate(45deg);
}
 .kx-selector__checkbox input:checked ~ .kx-selector__indicator::before {
	 display: block;
}
 

<label class="kx-selector kx-selector__checkbox">
  <input type="checkbox" name="checkbox" checked="checked" />
  <div class="kx-selector__indicator"></div>
  <span class="label-text">Select box</span>
</label>

<label class="kx-selector kx-selector__checkbox">
  <input type="checkbox" name="checkbox" />
  <div class="kx-selector__indicator"></div>
  <span class="label-text">Select box</span>
</label>

<label class="kx-selector kx-selector__checkbox">
  <input type="checkbox" name="checkbox" checked="checked" />
  <div class="kx-selector__indicator"></div>
</label>

Answer 1

尝试此100％正常工作

* { box-sizing: border-box; }
body { margin: 10px; }

 .kx-selector {
    display: flex;
    /* align-items: center; */     /* Remove this line*/
    flex-direction: column;        /*  Newly added */
    position: relative;
    padding: 5px 25px;             /*  Newly added */
}
 .kx-selector input {
	 position: absolute;
	 z-index: -1;
	 opacity: 0;
}
 .kx-selector__indicator {
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 position: absolute;
	 left: 0;
	 height: 20px;
	 width: 20px;
	 border: solid 1px #71767a;
}
 .kx-selector input:checked ~ .kx-selector__indicator {
	 border-color: #007a8c;
	 background-color: #007a8c;
}
 .kx-selector input:checked ~ .kx-selector__indicator::before {
	 border-color: #f6f6f6;
}
 .kx-selector__checkbox .kx-selector__indicator {
	 border-radius: 3px;
}
 .kx-selector__checkbox .kx-selector__indicator:before {
	 display: none;
	 content: '';
	 position: absolute;
	 box-sizing: content-box;
	 left: 7px;
	 top: 3px;
	 width: 3px;
	 height: 9px;
	 border: solid #f6f6f6;
	 border-width: 0 2px 2px 0;
	 transform: rotate(45deg);
}
 .kx-selector__checkbox input:checked ~ .kx-selector__indicator::before {
	 display: block;
}
 

<label class="kx-selector kx-selector__checkbox">
  <input type="checkbox" name="checkbox" checked="checked" />
  <div class="kx-selector__indicator"></div>
  <span class="label-text">Select box</span>
</label>

<label class="kx-selector kx-selector__checkbox">
  <input type="checkbox" name="checkbox" />
  <div class="kx-selector__indicator"></div>
  <span class="label-text">Select box</span>
</label>

<label class="kx-selector kx-selector__checkbox">
  <input type="checkbox" name="checkbox" checked="checked" />
  <div class="kx-selector__indicator"></div>
  <span class="label-text">Select box</span>
</label>

Answer 2

只需将.kx-selector__indicator位置：相对而不是绝对：

* {
  box-sizing: border-box;
}

body {
  margin: 10px;
}

.kx-selector {
  display: flex;
  align-items: center;
  position: relative;
}

.kx-selector input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.kx-selector__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative; /* updated */
  /*left: 0; no more needed */
  height: 20px;
  width: 20px;
  margin-right:5px; /* added */
  border: solid 1px #71767a;
}

.kx-selector input:checked~.kx-selector__indicator {
  border-color: #007a8c;
  background-color: #007a8c;
}

.kx-selector input:checked~.kx-selector__indicator::before {
  border-color: #f6f6f6;
}

.kx-selector__checkbox .kx-selector__indicator {
  border-radius: 3px;
}

.kx-selector__checkbox .kx-selector__indicator:before {
  display: none;
  content: '';
  position: absolute;
  box-sizing: content-box;
  left: 7px;
  top: 3px;
  width: 3px;
  height: 9px;
  border: solid #f6f6f6;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.kx-selector__checkbox input:checked~.kx-selector__indicator::before {
  display: block;
}

<label class="kx-selector kx-selector__checkbox">
  <input type="checkbox" name="checkbox" checked="checked" />
  <div class="kx-selector__indicator"></div>
  <span class="label-text">Select box</span>
</label>

<label class="kx-selector kx-selector__checkbox">
  <input type="checkbox" name="checkbox" />
  <div class="kx-selector__indicator"></div>
  <span class="label-text">Select box</span>
</label>

<label class="kx-selector kx-selector__checkbox">
  <input type="checkbox" name="checkbox" checked="checked" />
  <div class="kx-selector__indicator"></div>
</label>