Arcana HTML5模板适配GetSimple CMS后复选框不显示问题求助

咱先直接揪出问题根源——你提供的原模板CSS片段里，这条规则把所有表单元素的默认外观彻底移除了，自然也包括复选框：

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

当appearance: none应用在复选框上时，浏览器自带的复选框样式会完全消失，只剩关联的文本，这就是你看到的现象。之前单独调整input[type="checkbox"]的appearance没生效，大概率是因为这条全局规则的优先级更高，或者你没给复选框补上替代样式。

给你两种解决方案，按需选择：

方案1：恢复浏览器默认复选框样式 #

修改全局的appearance规则，把复选框排除在外，这样它就能回到默认显示状态：

input:not([type="checkbox"]), select, textarea { 
  -moz-appearance: none; 
  -webkit-appearance: none; 
  -ms-appearance: none; 
  appearance: none; 
}

这个方法最简单，适合不想自定义样式的场景。

方案2：自定义复选框样式（匹配Arcana模板风格） #

如果想要和模板风格统一的自定义复选框，保留appearance: none，但给复选框单独添加样式。因为模板已经引入了FontAwesome，我们可以用它的图标来做选中状态：

/* 基础复选框样式 */
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid #474747; /* 和模板文本颜色一致 */
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 0.5em; /* 和文本保持间距 */
}

/* 选中状态的样式 */
input[type="checkbox"]:checked::before {
  content: "\f00c"; /* FontAwesome实心对勾图标 */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #474747;
  font-size: 0.9em;
}

/* 可选：hover和focus状态的样式优化 */
input[type="checkbox"]:hover {
  border-color: #666;
}

input[type="checkbox"]:focus {
  outline: 2px solid rgba(71,71,71,0.3);
  outline-offset: 2px;
}

这样既保持了模板对其他表单元素的自定义风格，又能让复选框正常显示且样式统一。

注意事项 #

• 确保FontAwesome在页面中正确加载（原模板已经引入了fontawesome-all.min.css，一般没问题）
• 可以根据模板的主题色调整边框、图标的颜色，比如换成模板里的强调色
• 测试在不同浏览器（Chrome、Firefox、Safari等）的显示效果，确保兼容性

内容的提问来源于stack exchange，提问作者k1ngarthur