如何使用print.css使选择看起来像普通文本 [英] How to use print.css to make a select look like normal text

问题描述

我有一个显示此内容的网页：

I have a web page that display this:

其背后的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可能可行？有人可以告诉我如何实现这一目标吗？

Currently when this page is printed the Please Approve is coming out like shown. As in it prints it as a select dropdownlist. This makes sense however I was hoping that I could somehow get it so that when it prints it will look like it's a normal label, span etc? I was thinking this may be possible using print.css? Can anybody tell me how to achieve this?

推荐答案

我认为实现此目标的最简单方法是创建一个跨度隐藏在选择列表旁边的 screen.css 中，当您更改选择列表中的值时，更新跨度的值。在您的 print.css 中显示跨度并隐藏选择元素

Easiest way that I can think to accomplish this would be to create a span that is hidden in screen.css next to the select list and when you change the value in the select list, update the value of the span. In your print.css show the span and hide the select element

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

print.css

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

screen.css

screen.css

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

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

Just make sure that the media for your print stylesheet is set to print

这篇关于如何使用print.css使选择看起来像普通文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！