Question

我有一个复选框，点击后需要提交表单，即使没有javascript的帮助。因此，我正在创建一个内部有一个按钮的表单，并尝试将该按钮伪装成一个复选框。

到目前为止，我将此作为我的HTML：

<form>
    <button class="checkbox" type="submit">
    </button>
</form>

这是我的CSS：

.checkbox {
    padding: 0;
    height: 13px;
    width: 13px;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
}

我缺少什么让这个类与IE，Safari，Opera等兼容？

另外，如何让按钮显示？

Answer 1

对于IE和IE，

-ms-appearance Opera的-o-appearance

顺便说一句，这称为供应商前缀。

Answer 2

除了在添加vendor prefixes之前的答案之外，您可以通过在html

中添加复选标记来使其显示为已选中状态

.checkbox {
   height: 25px;
   width: 25px;
   -webkit-appearance: checkbox;
   -moz-appearance: checkbox;
   -ms-appearance: checkbox; 
   -o-appearance: checkbox;
   appearance: checkbox;
}

    <button class="checkbox" type="submit">✔</button>

显然Firefox不会在按钮内显示任何内容，所以我建议不要使用appearance，只是将勾号放在按钮内，它看起来像一个复选框，而不是Firefox中的默认复选框，但是如果你不能容忍你必须使用叠加层或svg来解决它

.checkbox {
  height: 25px;
  width: 25px;
  margin: 0;
  padding: 0;       
}

 <button class="checkbox" type="submit">✔</button>

Answer 3

你可以使用svg：

.button{
  display: inline-block;
  width:20px;
  height:30px;
  padding:20px 30px;
  border:3px solid orangered;
  background:white;
  border-radius: 3px;
  position:relative;
  cursor:pointer;}
 
.icon {
  display: inline-block; 
  stroke-width: 0;
  width:30px;
  fill: orangered;
  position:absolute;
  line-height:0;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
 
}

<form class="form" action="">
  <button class="button">
  <svg class="icon icon-checkmark" viewbox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
  </svg>
  </button>
</form>

如何伪装按钮看起来像一个复选框

3 个答案: