[英]Printing a checked checkbox / tick box with HTML and CSS
I have the following problem: I have to use an HTML->PDF conversion service to render a piece of HTML. 我有以下问题:我必须使用HTML-> PDF转换服务来呈现一段HTML。 However, this service is a bit limited in it's functionality, so I need a way to "work around" it.
但是,这项服务的功能有点受限,所以我需要一种“解决”它的方法。
I'm mainly just printing text, so it's not a big deal, but the only problem is that I have to print some "unticked" and some "ticked" check boxes, my converter is failing at this. 我主要只是打印文本,所以这不是什么大问题,但唯一的问题是我必须打印一些“未标记”和一些“勾选”的复选框,我的转换器在此失败。 In particular I've tried:
特别是我试过:
☐
☐
("☐") and ☑
☑
("☑") characters, but the converter doesn't render them (probably the font it's using doesn't have them) þ
þ
and ¨
¨
but again, the wingding font is not recognized I was thinking, at this point, to "simulate" a checkbox by using spans with borders, something like: 此时我正在考虑使用带边框的跨度来“模拟”一个复选框,例如:
<span style="border: 1px solid black; height: 12px; width: 12px;"></span>
However, I can't make it look correct (no fault of the converter this time, even browsers show the above as just one vertival line. 但是,我不能让它看起来正确(这次没有转换器的故障,甚至浏览器显示上面只是一个垂直线。
Can anyone help me "draw" checkboxes using just "basic" html elements? 任何人都可以使用“基本”html元素帮助我“绘制”复选框吗? What would be the cleanest way?
什么是最干净的方式?
PS: checkboxes need to be inline with the text. PS:复选框需要与文本内联。
You're on the right track. 你走在正确的轨道上。
Using HTML and CSS: 使用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
The reason YOUR code didn't work was because you were using a span
element, which is an inline element. 您的代码不起作用的原因是因为您使用的是
span
元素,它是一个内联元素。 You can use a span
for this, but you'll need to add the style of display: block
to the element (making it act as a block element instead of an inline element). 您可以使用
span
来实现,但是您需要将display: block
的样式添加到元素中(使其充当块元素而不是内联元素)。
The div
tag is a block, so no need for setting it's display
style. div
标签是一个块,因此无需设置它的display
样式。 If you would like the div
to display inline, set the display: inline-block
如果您希望
div
显示为内联,请设置display: inline-block
Try this : 试试这个 :
<div style="border: 1px solid black; width: 10px; height: 10px; display: inline-block; margin-right: 4px;"> </div>
https://jsfiddle.net/8rt4dqfc/ https://jsfiddle.net/8rt4dqfc/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.