如何使 HTML 复选框看起来像纸质表单复选框？ [关闭]

Question

我有几个 html 复选框，我想将其设置为纸质表单：

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

选中该框时，其中应该有一个X：

---

更新

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

这个也有一些不错的答案。

Answer 1

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

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";
}

<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>

Answer 2

你可以尝试这样的事情，但你需要创建你的复选框图像，才能使用它。

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%;
}

<input type="checkbox" />

JSFiddle

Mozilla FireFox 更新

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

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%;
}

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

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

Answer 3

HTML

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。