0

input, select, textareaとして行動することは可能spanですか？私の考えは、フォームのすべての入力をビジュアルスパンに視覚的に変換して、JavaScriptですべてを変換したり、印刷する特定のページを作成したりせずに印刷できるようにする印刷メディアCSSを作成することです。

この例のようなものが必要です。

webkit/chrome とのみ互換性がある必要がある-webkit-appearenceため、たとえばを使用できます。主な質問は、CSSのみで可能か、それとも JavaScript を使用する必要があるかということです。

4

1 に答える 1

0

少なくとも印刷されているときは、フォーム要素が通常のテキストのように見えるようにする必要があると思います。これは実際に非常に可能です。メディアクエリを使用して、印刷されたメディアにのみ適用されるカスタム スタイルを CSS に追加できます。@media print

コードは次のようになります。

@media print {
     input, textarea, select {
        border: none;
        display: block;
        font-family: consolas, monotype;
        font-size: 14px;
        width: 100%;
        height: auto;
        background: transparent;
        -webkit-appearance:none;
    }
}

css をフィドルに追加しました: http://jsfiddle.net/rWySb/3/

このスタイリングは印刷されたメディアにのみ適用され、画面には適用されないため、目に見える変更はないことに注意してください。ブラウザーの印刷プレビューを使用して、効果を確認します。または、間違いなく開発中に、メディアクエリのprintto を一時的に変更する方が簡単です。screen

すべてのプロジェクトで使用するデフォルトの印刷スタイリングも追加したことに注意してください。これは、実際には HTML5 ボイラープレートから「借用」されています。https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
これは必須ではありませんが、印刷された Web ページ atm で作業しているので役立つかもしれないいくつかの素晴らしいトリックとアイデアが含まれています。 ..

于 2013-04-09T18:55:50.703 に答える