如何使用print.css使选择看起来像普通文本

Question

我有一个显示这个的网页:

这背后的Html是:

<label>Approved For Payment:</label>

    <select id="Invoice_ApprovedForPayment" class="dropdownapprovedforpayment" name="Invoice.ApprovedForPayment" lineid="299" disabled="disabled">
    <option value="null" selected="selected">Please Approve</option>
    <option value="true">Accepted</option>
    <option value="false">On Hold</option>
    </select>

目前,当打印此页面时,请批准即将显示.因为它将其打印为选择下拉列表.这是有道理的,但是我希望我可以以某种方式得到它,以便它打印时看起来像是一个正常的标签,跨度等？我在想这可能是使用print.css吗？任何人都可以告诉我如何实现这一目标吗？

Answer 1

我能想到的最简单的方法是创建一个隐藏在screen.css选择列表旁边的范围,当您更改选择列表中的值时,更新范围的值.在你的print.css节目中显示范围并隐藏选择元素

使用Javascript

<script type="text/javascript">
  $(document).ready(function() {
    $("#Invoice_ApprovedForPayment").change(function() {
      $("#Invoice_ApprovedForPaymentSpan").val($(this).val());
    });
  });
</script>

HTML

<select id="Invoice_ApprovedForPayment" class="dropdownapprovedforpayment noprint" name="Invoice.ApprovedForPayment" lineid="299" disabled="disabled">
  <option value="null" selected="selected">Please Approve</option>
  <option value="true">Accepted</option>
  <option value="false">On Hold</option>
</select>
<span id="Invoice_ApprovedForPaymentSpan" class="noscreen"></span>

CSS

print.css

.noprint { display: none; }
.noscreen { display: inline; }

screen.css

.noprint { display: inline; }
.noscreen { display: none; }

只需确保打印样式表的介质设置为打印

Answer 2

appearance: none;
-moz-appearance: none;
-webkit-appearance: none;

适用于Chrome和Firefox.