2

メニューなどを非表示にするために、外部 css ファイルで @media print を使用しています。ただし、ドロップダウンリストの小さな三角形を印刷しても表示されます。それを非表示にして選択したアイテムのみを印刷するためのCSS設定はありますか?

4

5 に答える 5

9

これは Chrome と Firefox で動作します (他の環境でも動作する可能性があります)。

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
于 2012-05-15T19:16:28.827 に答える
1

いいえ、ありません。さらに、すべてのブラウザは独自の方法でドロップダウンを表示し、システム ウィジェットを使用するものもあれば、独自のウィジェットを使用するものもあります。たとえば、Safari では、どのようなスタイルを削除しても、全体を (まあ、一種の) ボックスで囲んでいます。HTML コードを変更したくない場合は、おそらく少しの JavaScript で変更できます。選択した値を取得し、ドロップダウンを段落に交換します。

于 2008-10-02T08:50:48.080 に答える
1

モノリシックなコンポーネントであるため、できません。たとえば、スクロールバーの外観を変更できないのと同じ方法で変更することはできません。

私は無作為に私の例を選んだわけではありません: もちろん、一部のブラウザー (少なくとも IE) では、後者を変更できます。ただし、キャプティブ イントラネット アプリケーションを対象としていない限り、ブラウザ固有の CSS を使用することはあまり実用的ではありません...

残念ながら、この部分を非表示にすることは確かに良い考えです。

[更新] 方法はあるかもしれませんが、意味論的には少し醜いです...何でも。 

<select name="Snakes" style="width: 200px;">
  <option value="A">Anaconda</option>
  <option value="B">Boa</option>
  <option value="C">Cobra</option>
  <option selected="" value="P">Python</option>
  <option value="V">Viper</option>
</select>
<!-- Put this style in a class, of course -->
<div style="background-color: white; 
    min-width: 20px; max-width: 20px; position: relative; 
    right: -180px; top: -19px;">&Nbsp;</div>

もちろん、div は画面メディアでは非表示にし、印刷メディアでは上記のスタイルを取得する必要があります。
FF3、Opera 9.5、さらには WinXP の IE7 (IE6 ではない) でも問題なく動作します。残念ながら、上記のハックはシステムに依存しており、他のブラウザーでは壊れている可能性があります。

PS .: Nbsp と書いたのは、そうでなければ構文の強調表示によって非表示になるためです... :-P

于 2008-10-02T09:13:20.817 に答える
1

ほとんどの人が言っているように、フォーム ウィジェットのレンダリング スタイルはほとんどブラウザに任されています。スタイルを多少変更することはできますが、基本的な変更はせいぜい信頼できません。

別のコメンターが述べたように、この効果を実現するには、JavaScript を少し使用することをお勧めします。これを行うためのjQueryを少し提供しました。ただし、これは理想的ではありません。ユーザーが [このページを印刷] リンクをクリックすることに依存しており、ブラウザ自体の印刷機能は使用していません。

次のマークアップの場合:

    <p><a class="print" href="#">print this</a></p>
    <form action="/my/action/" method="POST">
        <select id="mySelect">
            <option value="1">An Option</option>
            <option value="2" selected="selected">Another Option</option>
        </select>
    </form>

この jQuery は、ドロップダウンから現在選択されているアイテムのコンテンツを含む段落を追加し、ページを印刷する前にフォーム要素を非表示にします。

    $(document).ready(function() {
        $('a.print').click(function() {
            var selected = $('#mySelect option:selected').text();
            $('#mySelect').after('<p class="replacement">' + selected + '</p>');
            $('#mySelect').hide();
            window.print();
        });
    });
于 2008-10-03T13:21:39.597 に答える
0

これはIE6でうまくいきました。他のブラウザは試していません

http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx

于 2008-11-10T22:11:10.520 に答える