Как использовать 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>

В настоящее время, когда эта страница печатается, пожалуйста, подтвердите, как показано. Как в нем печатает его в виде выпадающего списка. Это имеет смысл, однако я надеялся, что смогу каким-то образом получить его, чтобы при печати он выглядел как обычная метка, интервал и т. Д. Я думал, что это может быть возможно с помощью print.css? Кто-нибудь может сказать мне, как этого добиться?

Answer 1

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

Хорошо работает на Chrome и Firefox.

Answer 2

Я думаю, что для этого проще всего создать диапазон, скрытый в 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 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

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

Answer 5

1. Создайте Print.css в папке Content, если вы еще не сделали
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. не проверял других.