Question

如何实现此类复选框（下图所示）？我尝试了一些代码，但它不会像我预期的那样工作。在伪元素之后，我不熟悉css。

.chkbox {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  position: relative;
  transition: border-color ease 0.125s;
  -ms-transition: border-color ease 0.125s;
  -moz-transition: border-color ease 0.125s;
  -webkit-transition: border-color ease 0.125s;
  cursor: pointer;
  border-radius: 2px;
}
.chkbox:before {
  right: -1px;
  width: 1px;
  top: -1px;
  height: 8px
}
.chkbox:after {
  top: -1px;
  right: 0;
  width: 2px;
  height: 2px
}

Answer 1

为什么不使用剪辑路径？删除伪元素，只需添加clip-path: polygon(0 0, 65% 0%, 65% 25%, 100% 25%, 100% 100%, 0 100%);

之类的内容

.chkbox {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  position: relative;
  transition: border-color ease 0.125s;
  -ms-transition: border-color ease 0.125s;
  -moz-transition: border-color ease 0.125s;
  -webkit-transition: border-color ease 0.125s;
  cursor: pointer;
  border-radius: 2px;
  clip-path: polygon(0 0, 65% 0%, 65% 25%, 100% 25%, 100% 100%, 0 100%);
}

<div class="chkbox"></div>

顺便提一句http://bennettfeely.com/clippy/

Answer 2

这是一个例子。

＆＃13;

.chkbox {
  display: none;
}

.chkbox+label {
  display: inline-block;
  color: #666666;
  position: relative;
  padding-left: 30px;
  margin: 7px 10px;
  font-size: 16px;
  line-height: 20px;
}

.chkbox+label:before {
  content: "";
  line-height: 20px;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: -1px;
  border-radius: 3px;
  border: 1px solid #aaaaaa;
}

.chkbox+label:after {
  height: 7px;
  width: 7px;
  content: "";
  background-color: #ffffff;
  position: absolute;
  left: 13px;
  top: -1px;
}

＆＃13;

<input type="checkbox" class="chkbox">
<label for="check1">Morning</label>

＆＃13;

Answer 3

尝试覆盖这样的边框

.chkbox:before {
   content: "";
   width: 7px;
   height: 7px;
   background:white;
   position:absolute;
   right:-1px;
   top:-1px;
}

这里有一个小提琴的例子 https://jsfiddle.net/th9qpdvh/2/

您也可以将图像用于此目的

Answer 4

试试这个

＆＃13;

.chkbox {
    height: 15px;
    width: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    position: relative;
    transition: border-color ease 0.125s;
    -ms-transition: border-color ease 0.125s;
    -moz-transition: border-color ease 0.125s;
    -webkit-transition: border-color ease 0.125s;
    cursor: pointer;
    border-radius: 2px;
    box-shadow: 1px -1px 2px #ccc;
}
.chkbox:after {
    content: '';
    display: block;
    right: -3px;
    width: 9px;
    top: -3px;
    height: 9px;
    background: #fff;
    position: absolute;
}

＆＃13;

<div class="chkbox"></div>

＆＃13;

Answer 5

您无法修改输入类型=＆＃34;复选框＆＃34;元素直接进入所需的形状，因为：

输入元素没有伪元素。
您不能使用其中一个答案中提到的剪辑路径，因为浏览器支持非常低（如果这是您的担忧。）CanIUse Reference

所以我建议你选择@Pugazh's answer

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    color: #404040;
    padding-left: 30px;
    margin: 7px 10px;
    font-size: 16px;
    line-height: 20px;
}

input[type="checkbox"] + label:before, input[type="checkbox"] + label:after {
    content: "";
    position: absolute;
    display: block;
}

input[type="checkbox"] + label:before {
    width: 18px;
    height: 18px;
    left: 0;
    top: -1px;
    border-radius: 3px;
    border: 1px solid #aaaaaa;
}

input[type="checkbox"] + label:after {
    height: 7px;
    width: 7px;
    background-color: #ffffff;
    left: 13px;
    top: -1px;
}

Answer 6

使用以下课程隐藏角落边框。

其他几个答案都不错。但是，它在某些浏览器上并不起作用。另一个答案会影响我的 TICK css类。最后，我发现以下解决方案可以在没有兼容性问题的情况下解决此问题。

JsFiddle

.hideWhite{
width:10px;
height:10px;
background:#fff;
border-radius:50%;
position:absolute;
top:-2px;
right:-4px;
display:inline-block
}

CSS切割半右上边框和半右上边框

6 个答案: