Keep background when button is hidden? (CSS/Javascript)

Question

I got a form with checkboxes. The Submit button first is hidden. When i check one checkbox at least the button will appear. That is working. But the button has some background image and that will also only appear when the button is visible. I want the background image to be always there. Is there a way to to this?

HTML :

  <div class="wrapper2"><input type = button class="next_button"  name="commit"  value="Submit" onClick="resultFunction();" > 

CSS :

.wrapper2{
    margin-top:  230px;
    text-align: center;
    background: -moz-linear-gradient(left, rgba(89,106,114,1) 0%, rgba(206,220,231,1) 58%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(89,106,114,1)), color-stop(58%,rgba(206,220,231,1)));
}

i forgot to add this here:

$(".next_button").hide();

$("#question1, #question2, #question3, #question4").change(function () {
          if ($("#question1").is(':checked') ||
              $("#question2").is(':checked') || 
              $("#question3").is(':checked') || 
              $("#question4").is(':checked') 
           ) {
             $(".next_button").show();

          } 
      });

Answer 1

您需要将按钮放在容器中，并为该容器提供背景，并确保容器具有宽度和高度，然后隐藏并仅显示按钮将容器背景保留在那里。

Answer 2

I've made a fiddle for you, hope it helps.

In short, just toggle the visibility rule of your <input type="submit" ... /> depending on <input type="checkbox" ... /> state.