checkboxが表示されない

checkboxが表示されないという不具合に遭遇しました。

原因は、cssに、次のような記述をしていたことでした。

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  -webkit-appearance: none;

}

-webkit-appearance: none;　は、ブラウザに依存する設定をクリアする設定です。
例えば、iPhoneでは、ボタンの角が丸く表示されますが、CSSで変更できません。
これを、変更できるようにするのが、この設定です。

これを設定すると、chromeやoperaで、input type="checkbox"が表示されなくなりました。firefoxでは表示されるため、気づくのが遅れました。

対策として、次を追記して解決しました。

input[type=checkbox]{
  -webkit-appearance: checkbox;
}

今回のことで、chromeの開発ツールの便利さが分かりました。