Как изменить цвет фона на вкладке с помощью css?

Привет всем, что я пытаюсь сделать, это изменить цвет фона флажка. Я устал от многих вещей, но ничего не работает. Может кто-нибудь помочь?

    input[type="checkbox"] {
      background: #3d404e;
      border: #7f83a2 1px solid;
   }

ОТВЕТЫ

Ответ 1

Я всегда использую псевдоэлементы :before и :after для изменения внешнего вида флажков и переключателей. Отлично работает.

Ссылка на эту ссылку для получения дополнительной информации

меры

  1. Скрыть флажок по умолчанию, используя правила CSS, такие как visibility:hidden или opacity:0 или position:absolute;left:-9999px и т.д.
  2. Создайте поддельный флажок, используя элемент :before и пропустите пустой или неразрывный пробел '\00a0';
  3. Когда флажок находится в состоянии :checked, передайте content: "\2713" Unicode content: "\2713", что является флажком;
  4. Добавить :focus стиль :focus чтобы сделать флажок доступным.
  5. Готово

Вот как я это сделал.

.box {
  background: #666666;
  color: #ffffff;
  width: 250px;
  padding: 10px;
  margin: 1em auto;
}
p {
  margin: 1.5em 0;
  padding: 0;
}
input[type="checkbox"] {
  visibility: hidden;
}
label {
  cursor: pointer;
}
input[type="checkbox"] + label:before {
  border: 1px solid #333;
  content: "\00a0";
  display: inline-block;
  font: 16px/1em sans-serif;
  height: 16px;
  margin: 0 .25em 0 0;
  padding: 0;
  vertical-align: top;
  width: 16px;
}
input[type="checkbox"]:checked + label:before {
  background: #fff;
  color: #333;
  content: "\2713";
  text-align: center;
}
input[type="checkbox"]:checked + label:after {
  font-weight: bold;
}

input[type="checkbox"]:focus + label::before {
    outline: rgb(59, 153, 252) auto 5px;
}
<div class="content">
  <div class="box">
    <p>
      <input type="checkbox" id="c1" name="cb">
      <label for="c1">Option 01</label>
    </p>
    <p>
      <input type="checkbox" id="c2" name="cb">
      <label for="c2">Option 02</label>
    </p>
    <p>
      <input type="checkbox" id="c3" name="cb">
      <label for="c3">Option 03</label>
    </p>
  </div>
</div>