Làm thế nào để sử dụng print.css để tạo ra một cái nhìn chọn như văn bản bình thường

Question

Tôi có một trang web mà hiển thị này:

Html đằng sau này là:

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

Hiện nay khi trang này được in, Phê duyệt Vui lòng sẽ xuất hiện như được hiển thị. Như trong nó in nó như là một danh sách thả xuống chọn. Điều này có ý nghĩa tuy nhiên tôi đã hy vọng rằng tôi bằng cách nào đó có thể nhận được nó để khi nó in nó sẽ trông giống như đó là một nhãn bình thường, span vv? Tôi đã nghĩ rằng điều này có thể có thể bằng cách sử dụng print.css? Ai có thể cho tôi biết làm thế nào để đạt được điều này?

Answer 1

Cách dễ nhất mà tôi có thể nghĩ để thực hiện việc này là tạo một khoảng được ẩn trong screen.css bên cạnh danh sách lựa chọn và khi bạn thay đổi giá trị trong danh sách chọn, cập nhật giá trị của khoảng. Trong bạn print.css hiển thị nhịp và ẩn các yếu tố chọn

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

Chỉ cần chắc chắn rằng các phương tiện truyền thông cho kiểu in của bạn được thiết lập để in

Answer 2

1. Tạo Print. css bên dưới thư mục Nội dung nếu bạn đã havent đã
2. thêm dòng này vào _Layout.cshtml <link href="@Url.Content("~/Content/Print.css")" rel="stylesheet" type="text/css" media="print" />
3. thêm chọn {yourStyle} vào Print.css thay thế kiểu của bạn theo kiểu bạn muốn.

lưu ý, IE9 dường như bỏ qua biểu định kiểu phương tiện in, ít nhất là bản xem trước bản in. điều này hoạt động tốt trong chrome. chưa thử nghiệm những người khác.

Answer 3

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

Hoạt động tốt trên Chrome và Firefox.

Answer 4

Đây là một giải pháp khác bằng cách sử dụng jQuery, mà không cần phải thêm thủ công theo tất cả các lựa chọn của bạn.

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

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