如何添加整个屏幕的复选框

Question

我想开发一个浏览器游戏，它需要填满整个屏幕的复选框。 以下是带有限制的代码。 我希望它能以相同的颜色传播整个屏幕。

Here is the reference code

请帮助我。

预先感谢您。

Answer 1

在代码中 - 进行以下更改以使其显示为全屏。

HTML

.frame 
-for i in (1..4000) 
    .pixel 
     - if i == 130 || i == 131 || i == 149 || i == 150 || i == 151 || i == 152 || i == 168 || i == 169 || i == 170 || i == 171 || i == 172 || i == 173 || i == 187 || i == 188 || i == 190 || i == 191 || i == 193 || i == 194 || i == 207 || i == 208 || i == 209 || i == 210 || i == 211 || i == 212 || i == 213 || i == 214 || i == 229 || i == 232 || i == 248 || i == 250 || i == 251 || i == 253 || i == 267 || i == 269 || i == 272 || i == 274 
      <input type="checkbox" id="pixel-#{i}" checked="checked"/> 
     - else 
      <input type="checkbox" id="pixel-#{i}"/> 
     <label class="tab" for="pixel-#{i}"></label> 

CSS

.frame { 
position: absolute; 
width: 100%; 
height: 100%; 
border-radius: 2px; 
box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3); 
overflow: hidden; 
background: #DE4738; 
color: #fff; 
font-family: 'Open Sans', Helvetica, sans-serif; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
} 

.pixel { 
float: left; 

input { 
    display: none; 
} 

label { 
    box-sizing: border-box; 
    display: block; 
    width: 20px; 
    height: 20px; 
    border: 1px solid #E24E3F; 
    cursor: pointer; 

    &:hover { 
     background: #EC5142; 
     border-color: #E24E3F; 
    } 

} 

input:checked ~ label { 
    background: #fff; 
    border-color: #fff; 
} 

} 

Codepen example