Question

我将一个复选框设置为白色，看起来很无聊。所以我只是想知道你可以在复选框中放置一个图像，使其更加丰富多彩吗？我已经搜索了很多关于这一点，但没有找到任何可以帮助我的东西

编辑：我已经选中了“选中”复选框，弹出一个菜单。 HTML：

  <!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href="css.css" type="text/css" />
<link rel="icon" href="favicon.ico" type="image/icon"/>
<title>Das Krankenhaus</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT4??4=" crossorigin="anonymous"></script>
    <script>
    $(function() {
    $(".box a").on("click",function() {
        $("#toggle-nav").prop('checked', false)
    });
});
</script>
<body>
<!-- start header -->
<header id="head">
  <div class="something">
      <nav id="menu">
        <input type="checkbox" id="toggle-nav"/>
        <label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
        <div class="box">
          <ul>
            <li><a href="#play"><i class="icon-home"></i> Play</a></li>
            <li><a href="#"><i class="icon-file-alt"></i> about</a></li>
            <li><a href="#"><i class="icon-copy"></i> XXXXXX</a></li>
            <li><a href="#"><i class="icon-envelope"></i> contacts</a></li>
          </ul>
        </div>

      </nav>
  </div>



  </header>
<!-- end header -->


  </div>
</section>
<!-- end content -->

<div class="jumbotron text-center">
  <div class="container"> 

    <h1>Das Krankenhuas</h1>
    <p style="color:#888;">A game you will never escape</p>

  </div>
</div>
<div class="container"> 

</div>



<div id="h1">
<center>
<h3> About The Game </h3>

</div>





  <div id="text">
<center>
<p> "Daz Krankenhaus" is a text based adventure game set in WW2, you have been captured by the enemie and need to find your way out. <br> It is currently in developement, so its not a full game. It is 100% made in Html,Javascript and CSS.   </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
</div>

<div id="h1">
<center>
<h3> Update log</h3>

</div>

  <div id="text">
<center>
<p> Update 1: Where it all started.
<br> <br>
Update 2: Bunker hallways, bug fixes. timer for getting killed. office. important man. uniform. form. kill with gun.
<br> <br>

Update 3: fix search guard and some bugs. Interrgatoin room.    </p>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
</div>







 <a id="play"></a>
  <div class="row">
    <div class="col-md-3 col-sm-3 col-xs-6"> <a href="http://www.musaus.no/simen/Krankenhausen/index.html" class="btn btn-sm animated-button thar-one">Play</a> </div>
  </div>
</div>
  <footer class="jumbotron text-center">
  <div class="container">
    <p style="color:#888">Copy righted <a href="http://2good4you.no">2good4you</a></p>
    </div>
  </footer>


</body>

</html>

和css：

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

body {
    font-family: 'Lato', sans-serif;
    background: #353535;
    color: #FFF;
}
#text {
color: #888;


}

.jumbotron h1 {
    color: #353535;
}
/* under play */
footer {
  margin-bottom: 0 !important;
  margin-top: 80px;
}
footer p {
  margin: 0;
  padding: 0;
}
span.icon {
    margin: 0 5px;
    color: #D64541;
}
h2 {
    color: #BDC3C7;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mrng-60-top {
    margin-top: 60px;
}

a.animated-button:link, a.animated-button:visited {
    position: relative;
    display: block;
    margin: 30px auto 0;
    padding: 14px 15px;
    color: #fff;
    font-size:14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    letter-spacing: .08em;
    border-radius: 0;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;

}
a.animated-button.thar-one {
    color: white;
    cursor: pointer;
    display: block;
    position: relative;
    width: 100%;
    margin-left: 170%;
    border: 2px solid white;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
     margin-bottom: 0 !important;
  margin-top: 80px;


}
a.animated-button.thar-one:hover {
    color: white !important;
    background-color: black;
    text-shadow: none;

}
a.animated-button.thar-one:hover:before {
    bottom: 0%;
    top: auto;
    height: 100%;
    margin: 0 auto;
}
a.animated-button.thar-one:before {
    display: white;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 0px;
    width: 100%;
    z-index: -1;
    content: '';
    color: black !important;
    background: black;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;

}

  @import url('http://fonts.googleapis.com/css?family=Merriweather+Sans:700,300');
  @import url('http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');

  * { padding: 0px; margin: 0px; border: 0px; outline: 0px; }       /* fast reset */

  body { 
    font-family: 'Merriweather Sans', Arial, sans-serif;
    font-size: 12px; 
  }

  a { text-decoration: none; }
  a:hover { text-decoration: underline; }

  li { list-style: none; }

  .something { margin: 0px 20% 0px 20%; }

  #head { margin-top: 20px; }

  #menu .box {
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -1;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.8);
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out;

  }

  #menu ul {
    position: relative;
    top: 20%;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out;
  }

  #menu li { 
    display: inline-block; 
    margin: 20px;
  }

  #menu li a {
    border-radius: 3px;
    padding: 15px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out;
  }

  #menu li a:hover { border-color: #fff; }

  #menu li a i { 
    margin-right: 5px; 
    font-size: 24px;
  }
/* Box */
  #toggle-nav-label {
    color: rgba(0,0,0,0.5);
    background: white;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 500;
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  #toggle-nav { display: none; }

  #toggle-nav:checked ~ .box { 
    opacity: 1;
    z-index: 400;
  }

  #toggle-nav:checked ~ .box ul {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  #toggle-nav:checked ~ #toggle-nav-label { 
    background: #fff; 
    color: rgba(0,0,0,0.8);
  }

  #content { margin: 20px 0px 20px 0px; }

  #content h1 {
    margin-bottom: 20px;
    font-size: 30px;
  }

  #content p {
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 20px;
  }

谢谢：）

Answer 1

您可以使用背景图像css属性。

Deom：http://jsfiddle.net/kEHGN/1/

    input[type="checkbox"] + label{
    background-image: url('img1.png');
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
    top: 0;
   left: 0;
    z-index: 1;
    }
  input[type="checkbox"]:checked + label{
   background-image: url( background-image: url('img2.png');
   height: 16px;
   width: 17px;
   display:inline-block;
   padding: 0 0 0 0px;
   }

图像里面的复选框

1 个答案: