📜  如何从下拉列表中删除默认箭头图标?

📅  最后修改于: 2021-10-29 04:14:30             🧑  作者: Mango

下拉菜单是图形控制元素,允许用户从值列表中选择一个值。它们在基于 Web 的表单中很突出,其中需要从一组固定值中输入特定值。在网页中,HTML 元素selectoption用于实现下拉列表。您可以从这里和这里了解这些标签及其实现。

让我们从查看示例下拉列表实现开始。下面的示例实现了一个带有选项的下拉列表,用于从一组可用选项中选择问题的难度级别。
例子:

 
 
  
    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

CSS 是网页的基础,用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。