Question

我想打印一个页面，其中有一个选择框，我只想在选择框中显示元素（甚至不显示选择下拉箭头）。因此，当用户打印此页面时，他们会看到选择框中的所有元素，而不仅仅是“选择项目”文本。

<html>
<head></head>
<body>
     <select> <option selected> Select item </option>
                            <option value="1" > 10 </option>
                            <option value="2"> 20 </option>
                            <option value="3"> 30 </option>
                            <option value="4"> 40 </option>
     </select>
</body>
</html>

Answer 1

准确复制div中的所选项目，并确保它已隐藏。 e.g。

<div class="printselector" style="display:none">10,20,30,40</div>

然后在您的打印样式表中，确保显示此选项并隐藏选择框。

所以完成的html看起来像这样。

<html>
<head>
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<style type="text/css">
    .myselector { display: block}
</style> 
</head>
<body>
     <select class="myselector"> <option selected> Select item </option>
                            <option value="1" > 10 </option>
                            <option value="2"> 20 </option>
                            <option value="3"> 30 </option>
                            <option value="4"> 40 </option>
     </select>
    <div class="printselector" style="display:none">10,20,30,40</div>
</body>
</html>

有一个单独的print.css文件，其中包含以下代码：

.printselector { display:block !important; }
.myselector { display:none !important; }

Answer 2

请参阅以下提及的链接

https://css-tricks.com/examples/SelectPrintable/

打印页面时不显示选择框仅显示选择框的元素

2 个答案: