CSS TextArea Print

Posted on 2006-05-10
Last Modified: 2013-11-19
I would like to set up a css for printing of my forms.  However my forms contain a lot of different sized textareas.  I would like the entire contents of each textarea to be printed.  How can this be done without sending the contents off to another dedicated page?  Can it be done using css at all or should I use Javascript to resize each of the boxes?
Question by:k2consulting
    LVL 30

    Expert Comment

    You can use javascript to transfer the content of your textarea into a block-level element that is hidden on screen media.
    Then use CSS to hide the textarea and show the block element on printed media.

    Author Comment

    How would this be done?
    LVL 30

    Accepted Solution

    Something like this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    <style type="text/css">

    div.Printable div {
      display: none;

    @media print {

      div.Printable textarea {
        display: none;
      div.Printable div {
        display: block;


    <script type="text/javascript">

    function copyTextAreaContent(source) {

      var text = source.value;
      text = text.replace('<', '&lt;');
      text = text.replace('>', '&gt;');
      source.nextSibling.innerHTML = text;



      <div class="Printable">
        <textarea onchange="copyTextAreaContent(this)">Lorem ipsum</textarea><div>Lorem ipsum</div>


    Author Comment

    OK I will give this a try.
    LVL 3

    Expert Comment

    Good solution. :)

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Join & Write a Comment

    What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now