復選框的自定義圖像-分隔標簽和復選框時如何處理？

Question

僅使用CSS，我就能用自定義圖像替換普通復選框。 問題是，在iPad上觀看時，它看起來可能像這樣：

[] This is
some text

而不是像這樣：

[] This
   some text.

這是我現在得到的：

 input[type="checkbox"] { visibility: hidden; position: absolute; height: 0; width: 0; } input[type="checkbox"] + label span { display: inline-block; width: 20px; height: 20px; margin: -2px 10px 0 0; vertical-align: middle; background: url(http://qa.walkup.audidriveusa.com/images/checkbox.png) no-repeat; cursor: pointer; } input[type="checkbox"]:checked + label span { background: url(http://qa.walkup.audidriveusa.com/images/checkbox-selected.png) no-repeat; } 

 <div style="width:100px"> <input type="checkbox" class="SurveyQuestion" id="q6a" name="Question_Vehicle_More_Information" value="Audi_A3"> <label for="q6a"><span></span>Audi A3 with long text that will wrap</label> </div> 

Answer 1

在父級上使用flex 。 這將使它們位於同一行，並且內容將包裝在各個flex子代中。

 label { display: flex; } input[type="checkbox"] { visibility: hidden; position: absolute; height: 0; width: 0; } input[type="checkbox"] + label span { height: 20px; margin: -2px 10px 0 0; display: block; background: url(http://qa.walkup.audidriveusa.com/images/checkbox.png) no-repeat; cursor: pointer; flex: 0 0 20px; } input[type="checkbox"]:checked + label span { background: url(http://qa.walkup.audidriveusa.com/images/checkbox-selected.png) no-repeat; } 

 <div style="width:100px"> <input type="checkbox" class="SurveyQuestion" id="q6a" name="Question_Vehicle_More_Information" value="Audi_A3"> <label for="q6a"><span></span>Audi A3 with long text that will wrap</label> </div> 

Answer 2

根據您更新的代碼段更新了代碼：我在標簽上添加了inline-flex ，在span上增加了padding-left: 10px和min-width: 20px 。

label {
  display: inline-flex;
}

input[type="checkbox"] + label span {
  min-width: 20px;
  padding-left: 20px;
}

Answer 3

將自定義復選框集成為<li>的<li> <ul>

SNIPPET

 .chx { display: none; } ul { list-style: none; } .lbl { width: 20px; height: 20px; border: 2px inset red; border-radius: 8px; position: relative; cursor: pointer; display: inline-block; float: left; margin-right: 10px; vertical-align: middle; } .lbl:hover { background: #000; } #chx1:checked+.lbl::before { content: '💀'; font-size: 16px; position: absolute; background: #000; border-radius: 6px; } #chx2:checked+.lbl::before { content: '👿'; font-size: 16px; position: absolute; background: #000; border-radius: 6px; } #chx3:checked+.lbl::before { content: '👽'; font-size: 16px; position: absolute; background: #000; border-radius: 6px; } 

 <ul> <input id='chx1' class='chx' type='checkbox'> <label for='chx1' class='lbl'></label> <li>Text that's long and will wrap with an indentation like a list item with a bullet.</li> <input id='chx2' class='chx' type='checkbox'> <label for='chx2' class='lbl'></label> <li>Text that's long and will wrap with an indentation like a list item with a bullet.</li> <input id='chx3' class='chx' type='checkbox'> <label for='chx3' class='lbl'></label> <li>Text that's long and will wrap with an indentation like a list item with a bullet.</li> </ul>