0

Boa noite, é possível colocar uma imagem no checkbox? é possível fazer esta imagem alterar quando o checkbox é selecionado, fazer esta imagem alterar quando o mouse passa por cima dela e fazer voltar ao normal quando o checkbox fica sem seleção?

O codigo abaixo esta muito grande mas pode se destacar somente as checkbox com imagens, gostaria de fazer esta imagem alterar quando o checkbox e selecionado, e gostaria de aprender como omito o icone quadrado do checkbox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/json+oembed" href="https://www.jotform.com/oembed/?format=json&amp;url=http%3A%2F%2Fwww.jotform.com%2Fform%2F61790563211957" title="oEmbed Form"><link rel="alternate" type="text/xml+oembed" href="https://www.jotform.com/oembed/?format=xml&amp;url=http%3A%2F%2Fwww.jotform.com%2Fform%2F61790563211957" title="oEmbed Form">
<meta property="og:title" content="870637 -  Counting the number of Checkboxes checked" >
<meta property="og:url" content="http://www.jotformpro.com/form/61790563211957" >
<meta property="og:description" content="Please click the link to complete this form.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="HandheldFriendly" content="true" />
<title>870637 -  Counting the number of Checkboxes checked</title>
<link href="https://cdn.jotfor.ms/static/formCss.css?3.3.13962" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.13962" />
<link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.13962" />
<style type="text/css">
    .form-label-left{
        width:150px !important;
    }
    .form-line{
        padding-top:12px;
        padding-bottom:12px;
    }
    .form-label-right{
        width:150px !important;
    }
    body, html{
        margin:0;
        padding:0;
        background:false;
    }

    .form-all{
        margin:0px auto;
        padding-top:20px;
        width:650px;
        color:#555 !important;
        font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
        font-size:14px;
    }
    .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
        color: #555;
    }

</style>

<style type="text/css" id="form-designer-style">
    /* Injected CSS Code */
em {
color:transparent;
}
    /* Injected CSS Code */
</style>

<script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.13962" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/js/vendor/math-processor.js?v=3.3.13962" type="text/javascript"></script>
<script type="text/javascript">
   JotForm.setCalculations([{"resultField":"3","operands":"1","readOnly":true,"showBeforeInput":false,"equation":"[|*|count|*|({1})]","decimalPlaces":"2","newCalculationType":"1","insertAsText":false,"showEmptyDecimals":false,"ignoreHiddenFields":false,"useCommasForDecimals":false}]);
   JotForm.init(function(){
	JotForm.clearFieldOnHide="disable";
	JotForm.onSubmissionError="jumpToFirstError";
   });
</script>
</head>
<body>
<form class="jotform-form" action="https://submit.jotformpro.com/submit/61790563211957/" method="post" name="form_61790563211957" id="61790563211957" accept-charset="utf-8">
  <input type="hidden" name="formID" value="61790563211957" />
  <div class="form-all">
    <ul class="form-section page-section">
      <li class="form-line" data-type="control_checkbox" id="id_1">
        <label class="form-label form-label-left form-label-auto" id="label_1" for="input_1"> My Options </label>
        <div id="cid_1" class="form-input jf-required">
          <div class="form-single-column">
            <span class="form-checkbox-item" style="clear:left;">
              <span class="dragger-item">
              </span>
              <input type="checkbox" class="form-checkbox" id="input_1_0" name="q1_myOptions[]" value="<img src=&quot;http://goo.gl/Qa5Afb&quot; width=&quot;100&quot; alt=&quot;&quot; /> - First" />
              <label id="label_input_1_0" for="input_1_0">
                <img src="http://goo.gl/Qa5Afb" width="100" alt="" />
                - First
              </label>
            </span>
            <span class="form-checkbox-item" style="clear:left;">
              <span class="dragger-item">
              </span>
              <input type="checkbox" class="form-checkbox" id="input_1_1" name="q1_myOptions[]" value="<img src=&quot;http://goo.gl/5hltAw&quot; width=&quot;100&quot; alt=&quot;&quot; /> - Second" />
              <label id="label_input_1_1" for="input_1_1">
                <img src="http://goo.gl/5hltAw" width="100" alt="" />
                - Second
              </label>
            </span>
            <span class="form-checkbox-item" style="clear:left;">
              <span class="dragger-item">
              </span>
              <input type="checkbox" class="form-checkbox" id="input_1_2" name="q1_myOptions[]" value="<img src=&quot;http://goo.gl/OSv6hh&quot; width=&quot;100&quot; alt=&quot;&quot; /> - Third" />
              <label id="label_input_1_2" for="input_1_2">
                <img src="http://goo.gl/OSv6hh" width="100" alt="" />
                - Third
              </label>
            </span>
            <span class="form-checkbox-item" style="clear:left;">
              <span class="dragger-item">
              </span>
              <input type="checkbox" class="form-checkbox" id="input_1_3" name="q1_myOptions[]" value="<img src=&quot;http://goo.gl/nFYv1z&quot; width=&quot;100&quot; alt=&quot;&quot; /> - Fourth" />
              <label id="label_input_1_3" for="input_1_3">
                <img src="http://goo.gl/nFYv1z" width="100" alt="" />
                - Fourth
              </label>
            </span>
          </div>
        </div>
      </li>
      <li class="form-line" data-type="control_calculation" id="id_3">
        <label class="form-label form-label-left form-label-auto" id="label_3" for="input_3"> How many were selected? </label>
        <div id="cid_3" class="form-input jf-required">
          <input type="text" defaultValue="0" class="form-textbox" data-type="input-textbox" id="input_3" name="q3_howMany" value="0" size="20" />
        </div>
      </li>
      <li class="form-line" data-type="control_button" id="id_2">
        <div id="cid_2" class="form-input-wide">
          <div style="margin-left:156px" class="form-buttons-wrapper">
            <button id="input_2" type="submit" class="form-submit-button">
              Submit
            </button>
          </div>
        </div>
      </li>
      <li style="display:none">
        Should be Empty:
        <input type="text" name="website" value="" />
      </li>
    </ul>
  </div>
  <input type="hidden" id="simple_spc" name="simple_spc" value="61790563211957" />
  <script type="text/javascript">
  document.getElementById("si" + "mple" + "_spc").value = "61790563211957-61790563211957";
  </script>
</form></body>
</html>

Agradeco a quem me ajudar!!!

1 Resposta 1

2

Tente assim, com base neste exemplo:

input[type=checkbox] {
  display:none;
}
input[type=checkbox] + label {
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
    height: 25px;
    width: 25px;
    display:inline-block;
}
input#input_1_0 + label {
  background-image: url('https://www.seeklogo.net/wp-content/uploads/2015/09/new-google-favicon-logo.png');
}
input#input_1_0:checked + label {
    background-image: url('http://goo.gl/Qa5Afb');
}
input#input_1_1 + label {
  background-image: url('http://2.bp.blogspot.com/-mfrRQkewv3Y/VkSzsWasszI/AAAAAAAAAQQ/LIjzOEn35B0/s1600/drive%2Blogo.png');
}
input#input_1_1:checked + label {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Google_plus.svg/1047px-Google_plus.svg.png');
}
<input type='checkbox' name='q1_myOptions[]' id="input_1_0"/>
<label for="input_1_0"></label> 
<input type='checkbox' name='q1_myOptions[]' id="input_1_1"/>
<label for="input_1_1"></label> 

EXEMPLO no jsfiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .