如何使用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>

目前，当打印此页面时，Please Approve将如图所示。因为它将其打印为选择下拉列表。这是有道理的，但是我希望我可以以某种方式得到它，以便它打印时看起来像是一个正常的标签，跨度等？我在想这可能是使用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。

Answer 3

这是使用jQuery的另一种解决方案，无需通过所有选择手动添加跨度。

<script type="text/javascript">
$(document).ready(function(){
    $(window).bind('beforeprint', function(){
        $('select').each(function(){
            $(this).after($('<span class="select-print">' 
                + $(this).find('option:selected').text() + '</span>'));
        });
    });
    $(window).bind('afterprint', function(){
        $('.select-print').remove();
    });
})
</script>
<style>
@media print {
    select { display:none }
}
</style>

Answer 4

1. 如果您还没有
，请在Content文件夹下创建Print.css
2. 将此行添加到_Layout.cshtml <link href="@Url.Content("~/Content/Print.css")" rel="stylesheet" type="text/css" media="print" />
3. 将select {yourStyle}添加到Print.css，将yourStyle替换为您想要的样式。

请注意，IE9似乎忽略了打印介质样式表，至少是打印预览。这在chrome中运行良好。没有测试过其他人。

Answer 5

使用JQuery为<ul>之后的<li>添加一个<option>块，<select>仅在打印时显示。

    // Build <ul> for our select
    var inputfield = "select.print_this_select";  // process one or more selects (use "select" for all)
    $(inputfield).addClass('printable-select');  // Hide select
    $(inputfield).each(function() {   // Add our <ul>
        var ul = $('<ul></ul>').addClass('print-select');  // only show it on print
        $(this).find("option").each(function() {
            text = $(this).text();
            if ('Please Approve' != text)   // Skip "instruction" option
                ul.append("<li>" + text + "</li>");
        });    
        $(this).after(ul);
    });

CSS：

/* Hide the original <select> and reveal our new <ul> */
@media print {
    .printable-select {
        display: none;
    }
}

.print-select {
    /* Hide our <ul> until needed */
    display: none;
    
    @media print {
        /* Reveal our <ul> on print */
        display: block;
    }
}

Answer 6

add_executable