[サポート状況]

フォーム部品等に対してブラウザのデフォルトのデザインを変更します。

チェックボックスのデザインを appearance: none で無効化し、好みのデザインを適用します。

.my-checkbox {
  appearance: none;
  outline: 1px solid #999;
  width: 12px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  vertical-align: top;
}
.my-checkbox:checked::before {
  content: "✔";
}

<div>
  <input id="c1" type="checkbox">
  <label for="c1">標準のチェックボックス</label>
</div>
<div>
  <input id="c2" type="checkbox">
  <label for="c2" class="my-checkbox">見栄えをカスタマイズしたチェックボックス</label>
</div>

セレクトボタンのデザインを appearance: none で無効化し、標準の選択矢印が表示されないようにし、独自デザインの矢印を表示しています。

select {
  margin-bottom: .3rem;
  width: 20rem;
  height: 2rem;
  padding: .2rem;
}
.my-select {
  position: relative;
  height: 2rem;
}
.my-select select {
  position: absolute;
  appearance: none;
}
.my-select span {
  position: absolute;
  top: 0.3rem;
  left: 18.5rem;
  font-size: 18px;
  font-weight: bold;
  color: #666;
}

<div>
  <select>
    <option>通常のセレクトボックス</option>
    <option>...</option>
  </select>
</div>
<div class="my-select">
  <select>
    <option>カスタマイズしたセレクトボックス</option>
    <option>...</option>
  </select>
  <span>&#8681;</span>
</div>

• https://www.w3.org/TR/css-ui-4/#appearance-switching
• https://caniuse.com/css-appearance