Question

I was working with a select box today that a previous employee had written.

When a user clicks on the drowp down arrow the styling is perfect, but when you actually select an item, the styling becomes pretty horrendous (in my opinion) once it is in its closed state. We are using jquery for enabling better handling over styling.

I had looked it over, but I am pretty stumped on how to achieve the same styling for the actual “selected value”. I have a feeling I am missing something pretty easy here, but it has yet to come to me.

You can set it in action here: http://test.amyadele.com/labels/bugs-and-animals/bugs-label.htm

Below is the css being used on the select box:

/* 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;
}

The select box in question is the one right above the “personalize and buy” link. The main issue is that when the select box is open, it has the preferred styling (nice generous spacing between the quantity, individual price, and total price). When you actually select an option, the quantity/individual price/total price all scrunch up to the left, basically losing all styling. I was just wondering if it were possible to actually style this as well.

Answer 1

That’s tricky.
Your text in the fancy dropdown is split in three spans, which have classes defining their width.
I don’t see that working in the text at the top, it’s just an input field.

If you edit the css for input.selectbox however, you could add a defintion for word-spacing, something like word-spacing: 24px; and that will space things out a bit. It won’t match, but it won’t be as jarring.

If possible, remove the space between the price and the letters “ea” so that the price doesn’t get messed up.