Почему моя html текстовая область отличается от window.print () в MVC 5

Question

Я пытался редактировать текстовую область. На странице html (экран) он получает то, что я хотел быть. Вот изображение нужной текстовой области на странице html:

Но, когда я попытался напечатать ее, используя window.print(), она показала так:

Это код jQuery, который я использовал:

$(document).ready(function () {
    $("input").css({ "background-color": "white", "border": "0", "font-size": "8pt" });
    $("textarea").css({ "background-color": "white", "border": "0", "font-size": "8pt", "width": "50%", "resize": "none", "vertical-align": "top", "overflow": "auto" });
    $("input.border-input[type=text]").css({ "background-color": "white", "font-size": "8pt", "border": "1px solid", "text-align":"center" });
    $("textarea.txtarea").css({ "width": "50 %", "background-color": "white", "border": "0", "font-size": "8pt", "resize": "none", "vertical-align": "top" });
});

Вот страница просмотра:

CSS

<style>
    .no-border {
        border: 0;
        box-shadow: none;
    }

    .smallFont {
        font-size: small;
        font-weight: normal;
    }

    .border-input {
        background-color: rgb(255, 255, 255);
        border: 1px solid;
        font-size: 8pt;
        text-align: center;
    }

    /*textarea {
        border: 0.5px solid black;
        background-color: white;
        resize: none;
        width: 230px;
    }*/

    @@media print {
        .pagebreak {
            /*clear: both;*/
            page-break-before: always;
        }
        /*textarea {
            display: block;
            height: auto;
            width: 50%;
            background-color: white;
            border: 0;
            font-size: 8pt;
            resize: none;
            vertical-align: top;
            display: block !important;
        }*/

        .txtarea {
            width: 50%;
            background-color: white;
            border: 0;
            font-size: 8pt;
            resize: none;
            vertical-align: top;
        }

        .border-input {
            background-color: rgb(255, 255, 255);
            border: 1px solid;
            font-size: 8pt;
            text-align: center;
        }
    }
</style>

HTML:

<input type="text" name="txtKodeNegaraPengirim" id="txtKodeNegaraPengirim" disabled="disabled" class="border-input"
   size="2" style="background-color: rgb(255, 255, 255); border: 1px solid; font-size: 8pt; text-align:center;" />

<textarea type="text" name="txtAlamatPengirim" id="txtAlamatPengirim" disabled="disabled" rows="2" cols="50"
    class="txtarea"></textarea>

Дело в том, что если бы я использовал класс border-input в CSS и jQuery, это сработало. Это показывалось в диалоговом окне печати, как я хотел. Но не textarea или .txtarea

Что мне делать? Я хочу, чтобы страница печати была такой же, как страница экрана, особенно текстовая область.