如何设置html选择框的样式以省略打印的下拉箭头？

I have an html select element which I would like to style for print so that it just looks like the selected text. How can I hide the drop down arrow?

我有一个html选择元素,我想为打印样式,以便它看起来像所选的文本。如何隐藏下拉箭头?

6 个解决方案

#1

You can't.

There is nothing in the standards that specifies that the select element has to have an arrow to indicate to the user that it has options to choose from, or how those options are shown. As those visual elements are not defined, there is naturally nothing defined for changing them.

标准中没有任何内容指定select元素必须有一个箭头指示用户它有可供选择的选项,或者如何显示这些选项。由于没有定义那些视觉元素,因此自然没有任何定义来改变它们。

You just have to display a different element when printing.

您只需在打印时显示不同的元素。

#2

The below works for Firefox, Safari, Chrome and a few others

以下适用于Firefox,Safari,Chrome和其他一些产品

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

For IE support look at http://fetchak.com/ie-css3/

有关IE支持,请访问http://fetchak.com/ie-css3/

#3

In webkit you can specify:

在webkit中,您可以指定:

-webkit-appearance: none;

Not sure about the other browsers.

不确定其他浏览器。

#4

Try this

http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

#5

One idea: for the print operation, swap the combo box with a label control.

一个想法:对于打印操作,使用标签控件交换组合框。

#6

You could provide the selected text value next to the dropdown and hide it via CSS. Then use a print stylesheet to show the text and hide the dropdown when printing.

您可以在下拉列表旁边提供所选文本值,并通过CSS隐藏它。然后使用打印样式表显示文本并在打印时隐藏下拉列表。

#1