html - 使用 HTML 和 CSS 打印选中的复选框/勾选框

Question

我有以下问题:我必须使用 HTML->PDF 转换服务来呈现一段 HTML。但是，此服务的功能有点受限，因此我需要一种方法来“解决”它。

我主要只是打印文本，所以没什么大不了的，但唯一的问题是我必须打印一些“未勾选”和一些“勾选”的复选框，我的转换器在这方面失败了。特别是我试过:

• 使用 unicode ☐ ("☐") 和 ☑ ("☑") 字符，但转换器不渲染它们 (可能它使用的字体没有有他们)
• 使用 WingDing 字符 þ 和 ¨ 但还是无法识别 wingding 字体
• 转换器不支持图片，所以不能只使用图片

在这一点上，我正在考虑通过使用带边框的 span 来“模拟”一个复选框，例如:

<span style="border: 1px solid black; height: 12px; width: 12px;"></span>

但是，我不能让它看起来正确(这次没有转换器的错误，甚至浏览器也将上面显示为一根垂直线。

任何人都可以帮助我仅使用“基本”html 元素“绘制”复选框吗？什么是最干净的方法？

PS:复选框需要与文本内联。

Answer 1

你走在正确的轨道上。

使用 HTML 和 CSS:

/* The standalone checkbox square*/
.checkbox {
  width:20px;
  height:20px;
  border: 1px solid #000;
  display: inline-block;
}

/* This is what simulates a checkmark icon */
.checkbox.checked:after {
  content: '';
  display: block;
  width: 4px;
  height: 7px;
  
  /* "Center" the checkmark */
  position:relative;
  top:4px;
  left:7px;
  
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

<div class="checkbox"></div> Unchecked<br><br>

<div class="checkbox checked"></div> Checked

您的代码不起作用的原因是您使用了 span 元素，这是一个内联元素。您可以为此使用span，但您需要将display: block 的样式添加到元素(使其充当 block 元素而不是内联元素)。

div 标签是一个 block ，所以不需要设置它的display 样式。如果您希望 div 显示内联，请设置 display: inline-block