How to use print.css to make a select look like normal text

问题

I have a web page that display this:

The Html behind this is:

<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>

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?

回答1:

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

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

screen.css

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

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

回答2:

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

Works well on Chrome and Firefox.

回答3:

Here is another solution using jQuery, without having to manually add spans by all your selects.

<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>

回答4:

Create Print.css under the Content folder if you havent already
add this line to _Layout.cshtml <link href="@Url.Content("~/Content/Print.css")" rel="stylesheet" type="text/css" media="print" />
add select { yourStyle } to Print.css replacing yourStyle with the style you want.

note, IE9 appears to ignore print media stylesheets, at least the print preview does. this works fine in chrome. haven't tested others.

回答5:

$(document).ready(function()
{
    $('select').each(function()
    {
        val = $(this).find('option:selected').val();
        $(this).prev().html(val);
    });
});

来源：https://stackoverflow.com/questions/8932524/how-to-use-print-css-to-make-a-select-look-like-normal-text

标签

html

css

asp.net-mvc

printing