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

我认为最简单的方法是试验填充。这使得 Edge 中的正方形更好：

.tick_mark {
    ...
    padding: 0px 2px;
    ...
}

您将不得不搜索如何仅将不同的 css 应用于 Edge，但我认为这仍然是可能的。

您可能无法使它们全部完全相同，但非常接近。

Answer 2

试试这个。

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>

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

Custom Checkbox tick not consistent on Edge Browser

css

checkbox

microsoft-edge