在jquery中選擇菜單與文本輸入字段的匹配寬度

Question

我正在使用jquery-mobile從用戶獲取信息。我似乎無法將我的選擇菜單的寬度與文本輸入字段的寬度對齊。

在我的小提琴上，選擇菜單應該看起來與兩個文本輸入字段相同。我能夠匹配我的選擇菜單的背景和邊框顏色，使其看起來像文本輸入字段。但是，當我調整選擇菜單的寬度時，它不會與不同的手機和方向保持一致。

注意：我不確定爲什麼，但我的CSS上的「.wide .ui-select .ui-btn」確實會調整選擇菜單的顏色和邊框，但它不會在小提琴上進行操作。不過，我不知道如何匹配不同瀏覽器的寬度。

http://jsfiddle.net/halogenmobile/DWTkD/1/

在此先感謝。

Answer 1

http://jsfiddle.net/DWTkD/2/

select { 
    background: black; 
    border: 2px solid white; 
    color: #fff; 
    padding: 2px; 
    width: 123px; 
} 

​ 

Answer 2

很難說沒有了jQuery Mobile的應用CSS爲好，但我最好的猜測是，該box-sizing可能是不同的，或者填充一定量的改變它。如果你有一個我們可以戳的實時版本，請分享。

Answer 3

你的輸入和選擇標記爲class =「wide」的dom元素正在使用它們的默認寬度。使用這樣的事情，以更好地控制它們的寬度：

.wide input, .wide select { 
    width: 100%; 
} 

編輯width: 100%與width: 123px季節的味道。

Answer 4

這可能工作：

$(document).ready(function(){ 
    $.each($('select'), function() { 
     $(this).selectmenu({ width : $(this).attr("width")}) 
    }) 
})