Is It Possible Put Image in Input Type="Check Box"

is it possible put image in input type=check box?

I found the way how give image to checkbox & radio button with pure css.

HTML

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>

CSS

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type=checkbox]:checked + label {
    background: #0080FF;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Check this for more http://css-tricks.com/the-checkbox-hack/ ,

https://gist.github.com/592332

Use images like checkboxes

Pure semantic HTML/CSS solution

This is easy to implement on your own, no pre-made solution necessary. Also it will teach you a lot as you don't seem too easy with CSS.

This is what you need to do:

Your checkboxes need to have distinct id attributes. This allows you to connect a <label> to it, using the label's for-attribute.

Example:

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>

Attaching the label to the checkbox will trigger a browser behaviour: Whenever someone clicks the label (or the image inside it), the checkbox will be toggled.

Next, you hide the checkbox by applying for example display: none; to it.

Now all that is left to do is set the style you want for your label::before pseudo element (which will be used as the visual checkbox replacement elements):

label::before {
    background-image: url(../path/to/unchecked.png);
}

In a last tricky step, you make use of CSS' :checked pseudo selector to change the image when the checkbox is checked:

:checked + label::before {
    background-image: url(../path/to/checked.png);
}

The + (adjacent sibling selector) makes sure you only change labels that directly follow the hidden checkbox in the markup.

You can optimize that by putting both images in a spritemap and only applying a change in background-position instead of swapping the image.

Of course you need to position the label correctly and apply display: block; and set correct width and height.

Edit:

The codepen example and snippet, which I created after these instructions, use the same technique, but instead of using images for the checkboxes, the checkbox replacements are done purely with CSS, creating a ::before on the label that, once checked, has content: "✓";. Add some rounded borders and sweet transitions and the result is really likable!

Here is a working codepen that showcases the technique and doesn't require images for the checkbox:

http://codepen.io/anon/pen/wadwpx

Here is the same code in a snippet:

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="cb"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked+label {
  border-color: #ddd;
}

:checked+label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked+label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

<ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
  </li>
  <li><input type="checkbox" id="cb3" />
    <label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
  </li>
  <li><input type="checkbox" id="cb4" />
    <label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
  </li>
</ul>

Using image for checkbox input

Add Border for img with transparent

label img {
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}

https://codepen.io/anon/pen/PVRxRM

Input type checkbox with image

You can create another label and use for

TRY THIS:

<form>  <label for="box">
    <input type="checkbox" id="box">    <img src="https://upload.wikimedia.org/wikipedia/hr/thumb/5/55/Avatar_2009.jpg/220px-Avatar_2009.jpg">
  </label>
<input type="submit" value="ask for price"></form>

How to change image on dynamic checkboxes?

In jQuery, the # is used for identifying elements by a certain id. Your checkbox does not have and id of chkbx, but rather it has a name of chkbx. So:

$("#chkbx").change(function() {

should be:

$("[name='chkbx']").change(function () {

EDIT: If the event still is not firing, it is possible that your event handler attempts to bind before the checkbox element is loaded into the DOM. You can resolve this by ensuring that the the code only executes once the entire page has been rendered. To accomplish this, edit your code as follows:

$(function() {
   $(document).on("change", "[name='chkbx']", change(function () {
      alert("At least the event is firing...");
      if ($(this).is(':checked'))
        {
          $(this).next().find('i').attr('class', 'btn fa fa-check-square-o');
          $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-red.gif');
        }
        else
        {
          $(this).next().find('i').attr('class', 'btn fa fa-plus-square-o');
          $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-blue.gif');
        }
   });
});

The $(function() { }) is shorthand for $(document).ready()

Use images instead of radio buttons

• Wrap radio and image in <label>
• Hide radio button (Don't use display:none or visibility:hidden since such will impact accessibility)
• Target the image next to the hidden radio using Adjacent sibling selector +
• Don’t forget to provide alternative text in the alt attribute, especially since it functions as the radio button’s label

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>

Hiding checkbox with CSS

You can set the opacity of the checkbox to 0. This still makes it clickable.

Example (click inside the black rectangle):

#checkbox {  opacity: 0;}#container {  border: 2px solid black;  width: 20px;;}

<div id="container">  <input type="checkbox" id="checkbox" onclick="alert('hello')"/></div>

---

Related Topics