jquery - 选择框 "closed"选项样式偏离

Question

我今天使用的是前一位员工编写的选择框。

当用户单击下拉箭头时，样式是完美的，但是当您实际选择一个元素时，一旦它处于关闭状态，样式就会变得非常可怕(在我看来)。我们使用 jquery 来更好地处理样式。

我已经看过了，但我对如何为实际的“选定值”实现相同的样式感到非常困惑。我有一种感觉，我在这里很容易错过一些东西，但我还没有想到。

您可以在此处设置它:http://test.amyadele.com/labels/bugs-and-animals/bugs-label.htm

下面是在选择框上使用的 css:

/* jquery.selectbox */
input.selectbox {
  -moz-border-radius: 2px 2px 2px 2px;
  -webkit-border-radius: 2px 2px 2px 2px;
  -khtml-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  background: url("/template/images/selectbox/selectbox_droparrow.png") no-repeat scroll 98% center #F8FDF8;
  border: 1px solid #7F9C7F;
  cursor: pointer;
  width: 250px;
  margin-top: 17px;
}

 #_input_ { display: none; } 

 /*Select Box Wrapper */
.selectbox-wrapper { position: relative; z-index: 1; }

.selectbox-wrapper ul, 
.selectbox-wrapper li { display: block; width: 100%; overflow: hidden; height: auto; }
.selectbox-wrapper li { position: relative; opacity: 0.95; }
.selectbox-wrapper li.even { background-color: #FFFFFF; }
.selectbox-wrapper li:hover,.selectbox-wrapper li.selected { background-color:  #E1EDBD; }
.selectbox-wrapper span { display: block; float: left; }
 /* Uses lettering */
.selectbox-wrapper .word1 { position: absolute; right: 215px; } /* right-align quantity */
.selectbox-wrapper .word2 { position: absolute; right: 150px; } /* right-align per-item cost */
.selectbox-wrapper .word3 { position: absolute; right: 125px; }
.selectbox-wrapper .word4 { position: absolute; right: 30px; } /* total price */
.onsale .selectbox-wrapper .word4 { position: absolute; right: 60px; } /*total price */
.onsale .selectbox-wrapper .word5 { position: absolute; right: 5px; } /* original price */
.onsale .word4{color:red}
.onsale .word5{text-decoration:line-through}

.selectbox-wrapper > ul {
  position: absolute;
  background-color: #F8FBF0;
  border: 1px solid black;
  min-width: 250px;
  -moz-border-radius: 2px 2px 2px 2px;
  -webkit-border-radius: 2px 2px 2px 2px;
  -khtml-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
}

.selectbox-wrapper ul .qty {
  display: block;
  float: left;
  width: 33%;

  text-align: left;
  clear: both;
}

.selectbox-wrapper ul .price-total {
  display: block;
  float: left;
  width: 33%;

  text-align: center;
}

.selectbox-wrapper ul .price-total {
  display: block;
  float: left;
  width: 33%;

  text-align: right;
}

有问题的选择框是“个性化和购买”链接正上方的那个。主要问题是当选择框打开时，它具有首选样式(数量、单价和总价之间的间距很大)。当你真正选择一个选项时，数量/单价/总价都向左收缩，基本上失去了所有的样式。我只是想知道是否也可以实际设计它的样式。

Answer 1

这很棘手。您在花式下拉列表中的文本分为三个跨度，这些跨度具有定义其宽度的类。我在顶部的文本中看不到它的作用，它只是一个输入字段。

但是，如果您编辑 input.selectbox 的 css，则可以添加字间距的定义，例如字间距:24px；这会把事情隔开一点。它不会匹配，但不会那么刺耳。

如果可能，请删除价格和字母“ea”之间的空格，以免价格困惑。