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/

希望这有帮助！

下拉选择器的CSS

1 个答案: