新 chrome 更新中的不同/新输入字段样式

Question

我的传送门的原色是#57889c 但是最新的chrome更新（版本：83）带来了输入字段的基本样式属性的一些变化，如下图所示。

说明： 选中后的新复选框，聚焦后的新输入字段

谁能给我一个CSS解决方案？我使用了-webkit-appearance: none;，但它没有带来任何好处，我经历了以下给定的solution。这对我不起作用。

Answer 1

纯 CSS 解决方案，允许任何颜色，同时尽量接近新设计。适用于 Chromium 浏览器（Chrome、新 Edge）和 Firefox。

:root {
  --primary-color: #57889c;
}

input[type="checkbox"] {
  height: 14px;
  width: 14px;
  position: relative;
    -webkit-appearance: none;
}

input[type="checkbox"]:before {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  height: 14px;
  width: 14px;
  border-radius: 2px;
  border: 1px solid #767676;
  background-color: #fff;
}

input[type="checkbox"]:hover::before {
  border: 1px solid #4f4f4f;
}

input[type="checkbox"]:checked:hover::before {
  filter: brightness(90%);
}

input[type="checkbox"]:checked:disabled:hover::before {
  filter: none;
}

input[type="checkbox"]:checked:before {
  content: "";
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  height: 14px;
  width: 14px;
  border-radius: 2px;
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
}

input[type="checkbox"]:checked:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 2px;
  box-sizing: border-box;
  height: 5px;
  width: 10px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: translateY(-1.5px) rotate(-45deg);
  transform: translateY(-1.5px) rotate(-45deg);
}

input[type="checkbox"]:disabled::before {
  border: 1px solid #c9ced1;
  border-radius: 2px;
  background-color: #f0f4f8;
}

input[type="checkbox"]:checked:disabled::before {
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  background-color: #d1d1d1;
}

<input type="checkbox"></input>
<input type="checkbox" checked="checked"></input>
<input type="checkbox" disabled="true"></input>
<input type="checkbox" disabled="true" checked="checked"></input>