css - Edge 浏览器上的自定义复选框勾选不一致

Question

我曾多次尝试使自定义复选框在所有浏览器中看起来一致。我面临问题的唯一浏览器是 Edge。我在所有主流浏览器中正确显示的刻度标记使用十进制代码。但是对于 Edge，我必须更改字体系列，因为 Edge 浏览器会适应 Segoe UI 符号字体。更改字体时，复选框的外观会发生变化，并且看起来不一致。

尝试在没有字体系列的情况下运行以下代码:Segoe UI Symbol；这就是我原来的复选框的样子。

label {
  display: inline-block;
  max-width: 100%;
}

input[type='checkbox'] {
  display: none;
  box-sizing: border-box;
  padding: 0;
  outline: none;
  border: none;
  background: transparent;
  width: auto;
}

input[type='checkbox']:checked+.tick_mark {
  color: #16a0de;
}

input[type='checkbox']+span {
  cursor: pointer;
  font-weight: normal;
  font-size: 11px;
}

.tick_mark {
  border: 1px solid #666;
  padding: 0px 1px;
  color: white;
  margin: 6px 4px 6px 0;
  font-weight: normal;
  font-family: Segoe UI Symbol;
}

<label>
  <input name="postSelected" class="NonUnSaved" id="chkBlog" type="checkbox" value="4">
  <span class="tick_mark">&#10004;</span>
  <span class="btntooltip" data-val="checkboxTest">Text 1</span>
</label>

Answer 1

试试这个。

label {
  display: inline-block;
  max-width: 100%;
}

input[type='checkbox'] {
  display: none;
  box-sizing: border-box;
  padding: 0;
  outline: none;
  border: none;
  background: transparent;
  width: auto;
}

input[type='checkbox']:checked+.tick_mark {
  color: #16a0de;
}

input[type='checkbox']+span {
  cursor: pointer;
  font-weight: normal;
  font-size: 11px;
}

.tick_mark {
  padding: 0px 1px;
  color: white;
  margin: 6px 4px 6px 0;
  font-weight: normal;
  font-family: Segoe UI Symbol;
  position: relative;
}
input[type='checkbox'] + .tick_mark:before {
    content: '\a0';
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    border: 1px solid #222;
    margin-right: 0.25em;
    line-height: 1;
    position: absolute;
    top: 1px;
    left: -2px;
}

<label>
  <input name="postSelected" class="NonUnSaved" id="chkBlog" type="checkbox" value="4">
  <span class="tick_mark">&#10004;</span>
  <span class="btntooltip" data-val="checkboxTest">Text 1</span>
</label>