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

Question

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?

Answer 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