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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1439163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:04:58  来源:igfitidea点击:

How can I style an html select box to omit drop down arrow for print?

css

提问by Tarquila

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 select 元素,我想为打印设置样式,使其看起来像选定的文本。如何隐藏下拉箭头?

采纳答案by Guffa

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.

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

回答by Rowan

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/

回答by keegan3d

In webkit you can specify:

在 webkit 中,您可以指定:

-webkit-appearance: none;

Not sure about the other browsers.

不确定其他浏览器。

回答by Matt Hamsmith

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

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

回答by Tom

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

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