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

正如大多数人所说，表单小部件的呈现风格几乎取决于浏览器。您可以对它们进行一些样式化，但对它们进行根本性的更改充其量是不可靠的。

正如另一位评论者所提到的，您最好使用一些 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 回答
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 必须隐藏在屏幕媒体中，并在平面媒体中获得上述样式。
在 WinXP 上的 FF3、Opera 9.5 甚至 IE7（不是 IE6）中运行良好。唉，我担心上述黑客是系统相关的，可能会在其他浏览器中被破坏。

PS.：我写 Nbsp 是因为语法高亮隐藏了它... :-P

于 2008-10-02T09:13:20.817 回答
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 回答