相关疑难解决方法(0)

我正在尝试创建自定义下拉控件,我需要隐藏本机控件中的箭头.我正在使用以下内容CSS,适用于Chrome和Safari,但不适用于Mozilla和IE.

select.desktopDropDown
{
    appearance: none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
}

这是[jsfiddle] [1].

我使用以下方法来实现圆角:

-moz-border-radius: 10px;  
border-radius: 10px;  
-webkit-border-radius: 10px;

除了Chrome之外,这适用于所有浏览器(不包括IE).以下是Chrome浏览器的外观:

但在Safari中显示相同的页面.作为Webkit浏览器,为什么这两个浏览器显示有区别？这就是它在Safari中的样子:

为什么会这样？

这是我正在使用的标记:

HTML:

div#one1 {
  position: relative;
  border-bottom: solid 2px #2D2DFF;
  width: 800px;
  height: 100px;
  color: #FFF;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topleft: 10px;
  border-radius-topleft: 10px;
  border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 20px rgba(255, 255, 255, 0.25), inset 0 -15px 150px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.3), inset 0 1px …

这看起来很简单,但我无法解决.

我有一个像这样的简单下拉菜单......

<select>
    <option value="1">Option 1</option>
</select>

...而且我想应用一个平面边框(没有3D效果),所以我正在使用:

select {
    border:1px solid #CCC;                
}

在这里查看实时样本:http://jsfiddle.net/GqGr3/

它在Firefox和IE中运行良好:

Firefox http://www.re-moto.com/usuario/select-1.png

但它在Chrome中呈现3D:

Chrome http://www.re-moto.com/usuario/select-2.png

这就是它在我的电脑中的工作方式.我在另一台计算机上测试了它,它呈现好.如果发生这种情况,我也会遇到其他用户.

我在Chrome中没有安装任何扩展程序,而且在Windows 7上浏览器是最新的(18.0.1025.151米).

这些是样本的计算样式(包括继承),我没有看到任何奇怪的东西:

-webkit-animation-delay: 0s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 0s;
-webkit-animation-fill-mode: none;
-webkit-animation-iteration-count: 1;
-webkit-animation-name: none;
-webkit-animation-play-state: running;
-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
-webkit-appearance: menulist-button;
-webkit-backface-visibility: visible;
-webkit-background-clip: border-box;
-webkit-background-composite: source-over;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-border-fit: border;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-image: none;
-webkit-border-vertical-spacing: 0px;
-webkit-box-align: center;
-webkit-box-direction: normal;
-webkit-box-flex: 0;
-webkit-box-flex-group: 1;
-webkit-box-lines: single;
-webkit-box-ordinal-group: 1;
-webkit-box-orient: …