Question

仅使用CSS，我能够用自定义图像替换普通复选框。问题是，当在iPad上看到时，它看起来像这样：

[] This is
some text

而不是这样：

[] This
   some text.

这是我现在所拥有的：

＆＃13;

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;
    }

＆＃13;

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

＆＃13;

Answer 1

在父级上使用flex。这将使它们保持在同一行，并且内容将包装在各个flex子项中。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

根据您更新的代码段更新了代码：我将inline-flex添加到标签padding-left: 10px和min-width: 20px的范围内。

label {
  display: inline-flex;
}

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

Answer 3

将自定义复选框整合为let memoize (f : 'K -> 'V) : 'K -> 'V = let dict = Dictionary<'K, 'V>() fun k -> match dict.TryGetValue k with | true , v -> v | false, _ -> let v = f k dict.[k] <- v v

的<li>

<强>段

<ul>

.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;
}

复选框的自定义图片 - 分隔标签和复选框时的方式？

3 个答案: