Question

我有几个html复选框，我想像纸张形式一样：

有没有办法用CSS做到这一点？
有没有办法构建一个看起来像这样的控件，但行为就像一个复选框？

选中此框后，其中应包含一个X：

更新

对于那些寻找类似问题的人：Make checkbox in chrome look like one in IE

这个也有一些非常好的答案。

Answer 1

以下是基于您的模型的解决方案：

＆＃13;

body {
    font-family: Arial, sans-serif;
}

/* Hide default checkbox */
input[type=checkbox] {
    display: none;
}

/* Style custom checkbox (indicated by <span>) that corresponds to its hidden version */
input[type=checkbox] + label span {
    border: 1px solid #000;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 4px 0 8px;
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

/* 'Checked' state */
input[type=checkbox]:checked + label span::after {
    content: "X";
}

＆＃13;

<form>
  Occupant
        
  <input type="checkbox" id="owner" name="occ" value="Owner"/>
  <label for="owner"><span></span>Owner</label>
        
  <input type="checkbox" id="tenant" name="occ" value="Tenant"/>
  <label for="tenant"><span></span>Tenant</label>
        
  <input type="checkbox" id="vacant" name="occ" value="Vacant"/>
  <label for="vacant"><span></span>Vacant</label>
</form>

＆＃13;

Answer 2

你可以尝试这样的东西但你需要创建你的复选框图像，以便使用它。

＆＃13;

input[type=checkbox] {
    position: relative;
    visibility: hidden;
    cursor: pointer;
}

input[type=checkbox]:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: -30px;
    visibility: visible;
    height: 50px;
    width: 50px;
    text-align: center;
    border-radius: 4px;
    background:url(http://www.clipartbest.com/cliparts/yTo/gj4/yTogj4zEc.png);
    background-size:100%;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

input[type=checkbox]:checked:after {
    content: "";
    background: url(http://www.clipartbest.com/cliparts/ncX/jL6/ncXjL6rcB.png);
    background-size:100%;
}

＆＃13;

<input type="checkbox" />

＆＃13;

JSFiddle

Mozilla FireFox更新

仅使用一些虚拟元素，这里使用标签并通过对其应用CSS来使用它。

＆＃13;

label.checkbox input[type="checkbox"] {display:none;}
label.checkbox span {
    display:inline-block;
    width:25px; /* This must be depend on image resolution */
    height:25px; /* This must be depend on image resolution */
    background:url(http://www.clipartbest.com/cliparts/yTo/gj4/yTogj4zEc.png);
    background-size:100%;
    -moz-background-size:100%;
    background-repeat:no-repeat;
    vertical-align:middle;
    margin:3px;
}
label.checkbox :checked + span {
    background:url(http://www.clipartbest.com/cliparts/ncX/jL6/ncXjL6rcB.png);
    background-size:100%;
    -moz-background-size:100%;
}

＆＃13;

<label class="checkbox"><input type="checkbox"/><span></span> Whatever you wanna say here... </label>

＆＃13;

注意：但仍然无法在old browsers
中使用

Answer 3

<强> HTML

＆LT; span onclick =＆＃34; this.innerHTML =（this.innerHTML？＆＃39;＆＃39;＆＃39; X＆＃39;）＆＃34;＆gt;

<强> CSS

span{
display:inline-block;
width:15px; 
height:15px; 
font:14px verdana; 
border:solid 1px black;
color:green;
vertical-align:baseline;
cursor:pointer;}

http://jsfiddle.net/ApHME/59/

Answer 4

可以隐藏真实input[type=checkbox]并使用:after伪元素在复选框前创建您想要的任何内容。这是一个类似问题的问题：css only checkbox (with content attribute)。然后只需使用CSS来设置它的样式。

如何使HTML复选框看起来像纸质复选框？

4 个答案: