将css与媒体打印一起使用时隐藏dropdownlist的三角形

我在我的外部css文件中使用@media print来隐藏菜单等。然而，在打印dropdownlist的小三角形时，仍然显示。是否有css设置可用于隐藏它并仅打印所选项目？

没有。此外，每个浏览器都以自己的方式显示其下拉列表，有些使用系统小部件，有些使用自己的小部件。例如，在Safari中，无论您删除了什么样式，它的整体周围仍然有一个框（嗯，有点）。

---

如果您不想更改HTML代码，也许可以使用一点javascript—获取所选值并将下拉列表交换为一个段落。

我暂时认为您不能，因为它是一个整体组件：您不能像更改滚动条外观那样更改它

我没有随机选择我的示例：当然，在某些浏览器中（至少是IE），您可以更改后者。但是使用一些特定于浏览器的CSS，这不是很实用，除非您的目标是捕获的intranet应用程序

太糟糕了，把这部分藏起来确实是个好主意

[更新]可能有一种方法，尽管从语义上看，它有点难看。。。不管怎样

<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>

水蟒
博阿
眼镜蛇
python
毒蛇
&Nbsp；

当然，div必须隐藏在屏幕媒体中，并在打印媒体中获得上述样式。
在FF3、Opera9.5甚至WinXP上的IE7（不是IE6）中都能正常工作。唉，我担心上述黑客行为依赖于系统，可能会在其他浏览器中被破解

---

注：我写Nbsp是因为语法高亮显示会隐藏它，否则…：-P

正如大多数人所说，表单小部件的呈现风格基本上由浏览器决定。您可以稍微设置它们的样式，但对它们进行根本性的更改最多也不可靠

正如另一位评论员所提到的，最好使用一点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();
        });
    });

$（文档）.ready（函数（）{
$（'a.print'）。单击（函数（）{
var selected=$（'#mySelect选项：selected'）。text（）；
$（“#mySelect”）。在（“
”+selected+”
）之后；
$（'#mySelect'）.hide（）；
window.print（）；
});
});

这在IE6中对我很有效。我没有尝试其他浏览器

---

这在Chrome和Firefox中有效（其他浏览器也可以）

---

我不确定你是否收到编辑通知，我不想再写一封回复信，所以以防万一我告诉你我给出了一种解决方案。。。

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;