下拉选择器的CSS

Question

无论怎么想，我都不是网络开发人员，我基本上是通过试验和大量错误来按照我想要的方式来做的。我似乎无法弄清楚这一点。我想将我的下拉选择器的样式从使用默认操作系统样式更改为我找到的合适样式，但我不知道在哪里。这是我现有的下拉选择器 CSS:

/* select
    ==========================================================*/
.selector, .selector * {
/* margin: 0;
  padding: 0; */
}
.selector select:focus { outline: 0; }

div.selector {
 /* background-position: -490px -24px;
  display: inline-block;
  overflow: hidden;
  padding-left: 2px;
  position: relative;
  vertical-align: middle;

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

  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2); */
}
  div.selector span {
 /* background-position: 100% 0;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    overflow: hidden;
    padding: 0px 27px 0px 7px;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap; */
  }
  div.selector select {
    /*background: #fff;
    color: #000;
    border: none;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
  text-transform:none;*/
  font-size:12px;
  opacity: 1 !important;
  }

div.selector, div.selector span {

  /*background-repeat: no-repeat;
  line-height: 24px; 
  text-transform: uppercase; 
    background-image: url("sprite.png");
    background-repeat: no-repeat;
    line-height: 24px;*/

}
div.selector, div.selector span, div.selector select { /*height: 24px;*/     }
/* #sort {

    margin: 10px 0;
  float:right;
  width:257px;
}
#sort span {display:none;}
#sort SELECT {
    background: none repeat scroll 0 0 #fff;
    color: #000;
    vertical-align: bottom;
  opacity:1 !important;
  float:left;

} */

button, textarea, input[type=text], input[type=password] {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea, input[type=text], input[type=password], select, .selector span {
  color: #888;
  font: 12px 'Helvetica Neue', Arial, sans-serif;
}

input[type=submit] { font: 12px 'Helvetica Neue', Arial, sans-serif; }

textarea, input[type=text], input[type=password] {
  border: 1px solid #a9a9a9;
  padding: 4px 8px;

}

button {
  background: transparent;
  color: #1b1e00;
  font-size: 28px;
  text-transform: lowercase;
}

button, label, input[type=submit] { cursor: pointer; }



.selector span { display: block; }
.selector, .selector span, .selector select { cursor: pointer; }

这是我希望它看起来像的 CSS:

/* all form DIVs have position property set to relative so we can easily position newly created SPAN */
form div{position:relative;} 

/* setting the width and height of the SELECT element to match the replacing graphics */
select.select{
    position:relative;
    z-index:10;
    width:166px !important;
    height:26px !important;
    line-height:26px;
}

/* dynamically created SPAN, placed below the SELECT */
span.select{
    position:absolute;
    bottom:0;
    float:left;
    left:0;
    width:166px;
    height:26px;
    line-height:26px;
    text-indent:10px;
    background:url(images/bg_select.gif) no-repeat 0 0;
    cursor:default;
    z-index:1;
    }

基本上我不知道任何东西去哪儿了。非常感谢任何帮助。

谢谢!

Answer 1

目前唯一完全支持下拉菜单样式的浏览器是 chrome。看这篇文章:
How to style a <select> dropdown with CSS only without JavaScript?

如果您需要下拉菜单来匹配跨浏览器，有几个选项。
1) http://harvesthq.github.com/chosen/或其他类似的(我通常的选择)，
2) 从头开始​​完全重新设计下拉菜单。不推荐这样做，因为它非常复杂且容易产生错误。见http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx
或
http://css-tricks.com/dropdown-default-styling/

希望这对您有所帮助!