下拉菜单是图形控制元素,允许用户从值列表中选择一个值。它们在基于 Web 的表单中很突出,其中需要从一组固定值中输入特定值。在网页中,HTML 元素select和option用于实现下拉列表。您可以从这里和这里了解这些标签及其实现。
让我们从查看示例下拉列表实现开始。下面的示例实现了一个带有选项的下拉列表,用于从一组可用选项中选择问题的难度级别。
例子:
Remove Arrow From Dropdown
GeeksforGeeks
How to remove the default arrow
icon from a dropdown list?
A sample dropdown list for difficulty
level of a problem:
输出:
- 点击列表前:
- 点击列表后:
现在,我们要删除默认的箭头图标 ( ) 出现在下拉列表中。
这可以通过改变-moz-外观或者-webkit-外观select 标签的 CSS 属性。
在浏览器中打开上述 HTML 代码后,如果您使用 chrome 的开发工具浏览网页,您会注意到“ -webkit-appearance ”属性的值默认设置为“ menulist ”,用于选择元素。
我们必须改变的正是这个价值。将此属性设置为“无”将完成这项工作。它明确告诉浏览器不要为该属性分配任何其他值,这反过来会导致删除默认箭头图标。
例子:
Remove Arrow From Dropdown
GeeksforGeeks
How to remove the default arrow
icon from a dropdown list?
A sample dropdown list for difficulty
level of a problem:
输出:
- 点击列表前:
- 点击列表后:
Chrome 开发者工具: https://developers.google.com/web/tools/chrome-devtools
-webkit-appearance/-moz-appearance: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
-ms-expand: https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-expand