Selectbox「已關閉」選項樣式已關閉

當用戶點擊向下箭頭時，造型是完美的，但是當您真正選擇一個項目時，一旦它處於關閉狀態，造型變得非常可怕（在我看來）。我們使用jQuery來更好地處理樣式。

我已經看過它，但我很難對如何實現相同的樣式爲實際的「選定的價值」。我有一種感覺，我錯過了一些很容易的事情，但它還沒有到我這裏來。

您可以在這裏的行動設置：

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

在考慮中的選擇框是一個正上方的「個性化和：http://test.amyadele.com/labels/bugs-and-animals/bugs-label.htm

下面正在上的選擇框使用的CSS購買「鏈接。主要問題是，當選擇框打開時，它具有首選樣式（數量，單個價格和總價格之間的間距很大）。當您實際選擇一個選項時，數量/單個價格/總價格都會縮小到左側，基本上會丟失所有樣式。我只是想知道是否可以實際設計。

來源

2011-06-14 Louis Stephens

你的問題是什麼？你的標題根本不涉及你的問題的內容。 – Dave 2011-06-14 13:06:14

在Chrome中看起來沒問題。具體哪個下拉菜單和什麼樣式看起來不好？ – 2011-06-14 13:07:45

在Chrome，IE7，IE8和IE9以及火狐瀏覽器中看起來還行4 – Jon 2011-06-14 13:10:40

這很棘手。您在精美下拉列表中的文字分爲三個跨度，其中有定義寬度的類。我沒有看到在頂部的文本工作，它只是一個輸入字段。

但是，如果您編輯input.selectbox的css，則可以爲word-spacing添加一個定義，如word-spacing：24px;並且會將事情分散一些。它不會匹配，但不會如此震動。

如果可能，請刪除價格和字母「ea」之間的空格，以便價格不會混亂。

來源

2011-06-14 13:36:33 daveyfaherty

Selectbox「已關閉」選項樣式已關閉

回答

相關問題