html - Arcana 模板中的隐形复选框

Question

我使用来自 https://html5up.net/arcana 的 Arcana HTML5 模板并将模板采用到 GetSimple CMS。两个模板(原始模板和我在 CMS 中的模板)都不显示元素。文本是可理解的，但复选框本身不是。

我对输入 [type="checkbox"] 的 css appearance 进行了一些尝试，但没有结果。也许这是错误的想法，或者代码中的错误位置。

从原始 css 中选择

@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/cssfamily=Source+Sans+Pro:300,300italic,600,600italic");

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5,
h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, 
code, del, fn, em, img, ins, kbd, q, s, samp, small, strike, 
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, 
li, fieldset, form, label, legend, table, caption, tbody, tfoot, 
thead, tr, th, td, article, aside, canvas, details, embed, figure, 
figcaption, footer, header, hgroup, menu, nav, output, ruby, 
section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input, select, textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
 }

body, input, select, textarea {
    color: #474747;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16pt;
    font-weight: 300;
    line-height: 1.65em;
}

Answer 1

因为你的appearance:none...

它将重置复选框的“ View ”，因为您可以在任何 css 文档中阅读。所以你的默认样式是none。浏览器不知道它看起来如何，例如添加

input[type=checkbox]{
  width: 100px;
  height: 100px;
  background: blue;
}

并且您的样式不再是空的。