从< select>中删除下拉箭头元件？ [英] Remove drop-down arrow from <select> element?

问题描述

可能重复：

如何从< select>中删除箭头Firefox中的标签

箭头仅在Chrome中消失。这是我正在使用的脚本：

 < style type = text / css> 
 select {
字体家族： Viga，无衬线； 
 font-size：16px; 
颜色：＃168ACB; 
填充：5px 10px 5px 10px; 
保证金：0px 5px 5px 5px; 
 border-radius：8px; 
 -moz-border-radius：8px; 
 -webkit-border-radius：8px; 
 -webkit-box-shadow：0 3px 0 #ccc，0 -1px #eaeaea inset; 
 -moz-box-shadow：0 3px 0 #ccc，0 -1px #eaeaea inset; 
 box-shadow：0 3px 0 #ccc，0 -1px #eaeaea inset; 
背景：＃f8f8f8; 
 border：none; 
轮廓：无； 
显示：inline-block; 
 -webkit-appearance：none; 
 -moz-appearance：none; 
外观：无； 
 cursor：pointer; 
} 
< / style> 
  

Chrome浏览器： http://i.imgur.com/Ocpux.png
Firefox& IE： http://i.imgur.com/5zGuX.png

解决方案

尝试查看以下内容：

如何从Firefox中的选择元素中删除箭头

碰巧我的评论：

试图将其封装在

与投票最高的水平相似答案。

Possible Duplicate:
How to remove the arrow from a <select> tag in Firefox

The arrow only disappears in Chrome. Here is the script that I'm using:

<style type="text/css">
select {
    font-family: 'Viga', sans-serif;
    font-size:16px;
    color:#168ACB;
    padding: 5px 10px 5px 10px;
    margin: 0px 5px 5px 5px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #eaeaea inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #eaeaea inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #eaeaea inset;
    background: #f8f8f8;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}
</style>

Chrome: http://i.imgur.com/Ocpux.png Firefox & IE: http://i.imgur.com/5zGuX.png

解决方案

Try seeing this:

How to remove the arrow from a select element in Firefox

Coincidentally my comment:

"Tried encapsulating that in a div with overflow hidden? Div will have width < Width of select."

is similar to the highest voted answer.

这篇关于从&lt; select&gt;中删除下拉箭头元件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！