13

いくつかのボックスを含むテーブルがあり<input type="text">、印刷時にこれらを通常のテキストとして表示したいと考えています。media="print" スタイルシートを設定しました

input
{
border-style: none;
}

その中で、これにより境界線が削除されるため、コンテンツはテキストのように見えますが、入力によって列の幅が実際の幅に押し上げられているため (驚くことではありません)、不要な空白と列の幅が得られます。CSSを使用して入力の幅をコンテンツのサイズに設定するか、これを修正する他の方法がありますか?

別のフォーラムの誰かが、ページのマークアップを物理的に変更するためにクライアント側のスクリプトを作成する印刷ボタンを使用することを提案しましたが、残念ながら、ページの複雑さと動的な性質のために実際には実用的ではありません.

無理だとは思いますが、質問させてください。

4

7 に答える 7

9

いいえ、これはスクリプトなしでは実行できないと思います。しかし、Jquery のようなフレームワークを使用すると、スクリプト作成は非常に簡単になります。

  • 入力要素ごとに、その<span>隣に を作成し、media="screen"スタイルシートで非表示になり、 で表示されるクラスを指定しmedia="print"ます。

  • 入力要素自体は、逆に動作するクラスを取得し、 で表示されscreen、 で非表示になりprintます。

  • 各入力要素はchange、隣接する を更新するイベントを取得しますspan。

私はこれを自分の袖から引き出すための JQuery ルーチンをまだ持っておらず、今それをまとめる時ではありませんが、それは間違いなく解決可能であり、まだ非常に控えめです - ユーザーが印刷を開始するときにスクリプトを実行する必要はありません.

質問にタグを付け直すか、新しい質問をすると、常駐の JQuery グルの 1 人がそれを見てくれるに違いありません :)

于 2010-02-23T13:29:38.653 に答える
5

ブートストラップを使用している場合:

@media print {
  .no-print {
    display: none !important;
  }

  .form-control
  {
    border: 0;
    padding:0;
    overflow:visible;
  }
}
于 2015-12-23T21:19:55.493 に答える
2

フォームのスタイルやその他のいくつかの方法に関する情報を探しているときに、これに出くわしました。

いくつかの CSS をいじった後、自分に合った CSS のみの方法を見つけました。

私のフォームはすべて、色の背景と黒の境界線を含むスタイルを持っています。

印刷用の CSS ファイルで、フォームの CSS をコピーし、すべての色 (テキスト自体ではない) を白に変更しました。つまり、テキスト ボックスが非表示になり、テキストのみが表示されます。

元の CSS - #form textarea、#form input、#form select{ border:1px solid #ddd; 色:#313131; }

CSS の印刷 - #form textarea、#form input、#form select{ border:1px solid #fff; 色:#fff; }

魅力のように機能します =>

お役に立てれば

于 2011-07-19T04:34:26.783 に答える
1 
input { border-style: none; display: inline}
于 2010-02-24T13:03:27.037 に答える
0

CSS 印刷セクションの入力フィールドの幅を定義するには、次を使用します。

width: ?cm

対応する入力要素に対して。

Firefox でテスト済み。ブラウザの以前のバージョンでは機能していなかった可能性があります。

于 2016-10-11T09:45:47.513 に答える
0

ブートストラップの場合、これは私にとってはうまくいきます。これはuser5712635の回答に基づいていますが、選択入力の下向き矢印を取り除くために外観プロパティを追加しました。

@media print {    
  .form-control
  {
    border: 0;
    padding:0;
    overflow:visible;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}
于 2019-09-08T21:57:46.003 に答える