बनाने के लिए print.css का उपयोग कैसे करें सामान्य पाठ की तरह एक का चयन नज़र

Question

मैं एक वेब पेज इस प्रदर्शित करता है:

एचटीएमएल इसके पीछे है:

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

वर्तमान में जब यह पृष्ठ मुद्रित है कृपया अनुमोदित की तरह बाहर आ रहा है। जैसा कि इसमें इसे एक ड्रॉपडाउन सूची के रूप में प्रिंट करता है। यह समझ में आता है हालांकि मैं उम्मीद कर रहा था कि मैं इसे किसी भी तरह से प्राप्त कर सकता हूं ताकि जब यह प्रिंट हो जाए तो यह एक सामान्य लेबल, अवधि आदि जैसा दिखता है? मैं सोच रहा था कि यह प्रिंट.css का उपयोग कर संभव हो सकता है? क्या कोई मुझे बता सकता है कि इसे कैसे प्राप्त किया जाए?

Answer 1

सबसे आसान तरीका यह है कि मैं इसे पूरा करने के लिए सोच सकता हूं कि चयन सूची के बगल में screen.css में छिपा हुआ एक स्पैन बनाना होगा और जब आप चयन सूची में मान बदलते हैं, तो अवधि के मान को अपडेट करें। अपने में print.css अवधि दिखाने के लिए और चयन तत्व

छिपाने जावास्क्रिप्ट

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#Invoice_ApprovedForPayment").change(function() { 
     $("#Invoice_ApprovedForPaymentSpan").val($(this).val()); 
    }); 
    }); 
</script> 

एचटीएमएल

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

सीएसएस

print.css

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

screen.css

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

बस सुनिश्चित करें कि आपके प्रिंट स्टाइलशीट के लिए प्रिंट मीडिया के लिए

Answer 2

1. प्रिंट बनाएं सेट है। सामग्री फ़ोल्डर के तहत सीएसएस अगर आप पहले से ही
है
2. इस लाइन को _Layout.cshtml <link href="@Url.Content("~/Content/Print.css")" rel="stylesheet" type="text/css" media="print" />
3. में जोड़ें अपनी स्टाइल के साथ अपनी स्टाइल को बदलकर Print.css पर {yourStyle} चुनें।

नोट, IE9 प्रिंट मीडिया स्टाइलशीट को अनदेखा करता है, कम से कम प्रिंट पूर्वावलोकन करता है। यह क्रोम में ठीक काम करता है। दूसरों का परीक्षण नहीं किया है।

Answer 3

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

क्रोम और फ़ायरफ़ॉक्स पर अच्छी तरह से काम करता है।

Answer 4

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 5

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