Question

＆＃13;

.selected_area {
    background-color: #c8c8c8;
    height: 330px;
    border-radius: 5px;
    width:233px;
    margin-top:5px;
}

.selected_area label input[type="checkbox"] {
  display:none;  
}


.selected_area label input[type="checkbox"] + .label-text:before {
  content: url("../images/xxx.png");
  speak: none;
  font-style: noraml;
  font-size: normal;
  font-variant: normal;
  font-transform: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  /*width: em;*/
  /*display: inline-block;*/
  margin-right: 10px;
}

.selected_area label input[type="checkbox"]:checked + .label-text:before {
  content: url("../images/xxx.png"); 
}

＆＃13;

<div class="selected_area">
              <label>
                <input type="checkbox" value="scooter" id="">
                <div class="label-text"><span>This is a testThis is a testThis is a testThis is a testThis is a testThis is a test</span></div>
              </label>
            </div>

＆＃13;

现在我正在使用我的图像而不是原始的复选框图像。结果并不完美。

如何在我的图片旁边制作文字，如果文字太长，它会显示在下一行，但仍然在图片旁边但不在它下面？

Answer 1

我希望这是你所期待的。摆脱<span>元素，将文字放在单独的div下。然后将图像和文本div浮动到左侧，并将margin-left应用于文本div，使其不会与图像重叠。

.selected_area {
  background-color: #c8c8c8;
  height: 330px;
  border-radius: 5px;
  width: 233px;
  margin-top: 5px;
}
.selected_area label input[type="checkbox"] {
  display: none;
}
.label-text{
  float: left;
  display: inline-block;
  word-break: break-all; 
}

#text{
  margin-left: 25px;
}
.selected_area label input[type="checkbox"] + .label-text:before {
  content: url("http://files.softicons.com/download/toolbar-icons/black-wireframe-toolbar-icons-by-gentleface/png/16/checkbox_unchecked.png");
  speak: none;
  font-style: noraml;
  font-size: normal;
  font-variant: normal;
  font-transform: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  /*width: em;*/
  /*display: inline-block;*/
  margin-right: 10px;
}
.selected_area label input[type="checkbox"]:checked + .label-text:before {
  content: url("http://files.softicons.com/download/toolbar-icons/black-wireframe-toolbar-icons-by-gentleface/png/16/checkbox_checked.png");
}

<div class="selected_area">
  <label style="display: inline">
    <input type="checkbox" value="scooter" id="">
    <div class="label-text">
    </div>
    <div id="text">This is a testThis is a testThis is a testThis is a testThis is a testThis is a test</div>
  </label>
</div>

Answer 2

这是我的一个页面，我有一个自定义复选框，只是举个例子

input[type="checkbox"]{
    vertical-align:middle;
    margin:-3px 5px 0 0;
    background: #fff;
    height:17px;
    width:17px;
    opacity: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
input[type="checkbox"]+label:before{
    content:"";
    display:inline-block;
    margin:-3px 8px 0 -25px;
    vertical-align:middle;
    height:17px;
    width:17px;
}
input[type="checkbox"]+label:before{
    background:url(image url) {position to box};
}

input[type="checkbox"]:checked+label:before{
    background:url(image url){position to box with tick};
}

Answer 3

我已经使用checkbox hack 完成了所需，请查看：

Html：

<label class="myCheckbox">
<input type="checkbox" name="test"/>
<span></span>
</label>
<p>This is test</p>

CSS：

.myCheckbox {
                 float: left;
                }
`.myCheckbox input {
    display: none;
}`
`.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background: url("http://www.findanyfloor.com/pub/images/checkbox.png");
}`
`.myCheckbox input:checked + span {
    background: url("http://2.bp.blogspot.com/-FBS0AYl_Gug/Uo5bW7XztnI/AAAAAAAADrA/vIr35ivrZOM/s1600/Checkbox+icon+image_small.png");
}`

我希望它能解决您的问题。

如何在文本旁边放置自定义图像而不是复选框？

3 个答案: