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

Question

我有以下问题:我必须使用HTML-> PDF转换服务来呈现一段HTML.但是,这项服务的功能有点受限,所以我需要一种"解决"它的方法.

我主要只是打印文本,所以这不是什么大问题,但唯一的问题是我必须打印一些"未标记"和一些"勾选"复选框,我的转换器失败了.特别是我试过:

• 使用unicode ☐("☐")和☑("☑")字符,但转换器不渲染它们(可能是它使用的字体没有它们)
• 使用WingDing字符þ,¨但再次,不能识别wingding字体
• 转换器不支持图像,因此不能只使用图像

此时我正在考虑使用带边框的跨度来"模拟"一个复选框,例如:

<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的元素(使之作为一个块级元素,而不是一个内联元素).

该div标签是一个块,所以不必设定它的display风格.如果您希望div显示内联,请设置display: inline-block