选择菜单的宽度与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")})
    })
})