在CSS中使用不同的图像作为复选框

Question

我已经看到了一些问题，询问如何用已经回答的图像替换复选框，但我有一个单独的问题。 我正在尝试制作一个带有多个复选框的表单，每个复选框都有一个不同的图像，供用户用作按钮。每当我尝试拥有2个不同的图像时，一个人不会显示，只有一个按钮可以工作。任何帮助表示赞赏！

这是我的代码：

＆＃13;

＆＃13;

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


     .services_form input[type=checkbox]:checked + label
     {
	      background-color: #bdc3c7;
	      background-size: 100%;
	      height: 250px;
	      width: 250px;
          opacity: 0.5;
	      display:inline-block;
	      padding: 0 0 0 0px;
     }


     .services_form input[type=checkbox] + label
     {
	      background-size: 100%;
	      height: 250px;
	      width: 250px;
	      display:block;
	      float: left;
	      padding: 0 0 0 0px;
	      cursor: pointer;
     }

    #accomButton{
	     background: url("button1.png") no-repeat;
    }

    #fooBar{
         background-image: url("button2.png");
    }

    .button {
	     float: left;
	     width: 35%;
	     height: 35%;
	     border-radius: 15%;
	     margin: 5% 5% 5% 5%;
    }

＆＃13;

    <form class="services_form">
        <div class="accomButton">
        <input type="checkbox" id="accomButton"></input>
        <label for="accomButton" id="accomLabel"></label>
        </div>
        <div class="button">
        <input type="checkbox" id="foo"></input>
        <label for"foo" id="fooBar"></label>
        </div>
    </form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要If path = vbNullString Or fileName = vbNullString Then MsgBox "I need a path!" Exit Sub End If 使用background: url("button1.png") no-repeat;，而不是#accomButton #accomLabel {/ 1}}。{/ 1>