Question

我今天正在使用一个前一位员工撰写的精选框。

当用户点击drowp向下箭头时，样式是完美的，但是当你实际选择一个项目时，一旦它处于关闭状态，样式就会变得非常可怕（在我看来）。我们使用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”之间的空格，这样价格就不会搞砸了。

选择框“关闭”选项样式是远离

1 个答案: