Hide form controls when printing an HTML page with CSS

后端 未结 6 849
被撕碎了的回忆
被撕碎了的回忆 2021-02-12 12:20

Certain HTML form elements have extra UI attached to them, like the up/down arrows on number. When printing the page however, those buttons are no longer needed, as

6条回答
  •  不知归路
    2021-02-12 12:33

    You can try to hide specific elements with CSS selectors

    @media print {
        input[type=range] {
            display: none;
        }
    }
    

    However, to hide the arrows in a number element, perhaps you could try to put 2 elements instead, 1 text and 1 number, and then display the number when in screen mode, while the text is hidden, and vice-versa in print mode

    @media print {
        input[type=text] {
            display: inline-block;
            border:none;
            border-bottom:2px solid #000;
            etc..
        }
        input[type=number] {
            display: none;
        }
    }
    @media screen {
        input[type=number] {
            display: inline-block;
        }
        input[type=text] {
            display: none;
        }
    }
    

    Something similar can be done for other form elements. It will depend on your implementation if you can use this method.

自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题