CODEWITHSUNDEEP
htmlcss
Dreams
Dreams

Reputation: 8506

How to put a custom image instead of checkbox next to text?

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

Now I am using my image instead of original checkbox image. The result was not perfect.

How do I do to make my text next to my image and if the text is too long, it will display on next line but still next to image not under it?

Upvotes: 0

Views: 1238

Answers (3)

nrvarun
nrvarun

Reputation: 193

I have done the needed using a checkbox hack , do check it out :

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");
}`

I hope it solves your query.

Upvotes: 0

radiant
radiant

Reputation: 152

This is what I have for one of my page where I have a custom checkbox, just giving an example 

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

Upvotes: 0

Aruna Tebel
Aruna Tebel

Reputation: 1466

I hope this is what you expect. Get rid of your <span> element and put your text under a separate div. Then float the image and text div to the left and apply a margin-left to the text div so that it will not overlap with the image.

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

Upvotes: 2

Related Questions