Selectbox的“ closed”选项样式已逐渐消失

问题描述

|| 今天，我正在使用前雇员写过的选择框。 当用户单击向下的向下箭头时，样式是完美的，但是当您实际选择一个项目时，一旦处于关闭状态，样式就会变得非常可怕（在我看来）。我们正在使用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;
}

有问题的选择框是“个性化和购买”链接上方的一个。主要问题在于，当选择框处于打开状态时，它具有首选的样式（数量，单个价格和总价之间的间隔非常大）。当您实际选择一个选项时，数量/个体价格/总价格都向左收缩，基本上失去了所有样式。我只是想知道是否也可以对它进行样式设置。     

解决方法

        那很棘手。 花式下拉菜单中的文本分为三个范围，其中三个类定义了它们的宽度。 我看不到顶部的文本在起作用，它只是一个输入字段。 但是，如果您编辑用于input.selectbox的css，则可以为单词间距添加一个定义，例如单词间距：24px;这样会把东西隔开。它不会匹配，但不会那么刺耳。 如果可能的话，请删除价格和字母“ ea”之间的空格，以免价格混乱。