jquery - 選択メニューの幅をjqueryのテキスト入力フィールドに合わせる

Question

jquery-mobile を使用してユーザーから情報を取得しています。選択メニューの幅をテキスト入力フィールドの幅に合わせることができないようです。

私のフィドルでは、選択メニューは 2 つのテキスト入力フィールドと同じに見えるはずです。テキスト入力フィールドのように見えるように、選択メニューの背景色と境界線の色を一致させることができます。しかし、選択メニューの幅を調整すると、さまざまな電話や向きに一貫して整列しません。

注：理由はわかりませんが、cssの「.wide .ui-select .ui-btn」は選択メニューの色と境界線を調整しますが、フィドルでは調整していません。それにもかかわらず、さまざまなブラウザーの幅を一致させる方法がわかりません。

前もって感謝します。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

jQuery Mobile CSS も適用されていないと判断するのは難しいですが、私の推測では、box-sizingが異なる可能性があるか、ある程度のパディングによって変更されている可能性があります。私たちが突っ込むことができるライブバージョンがどこかにある場合は、共有してください.

score 0 · Accepted Answer

class="wide" とラベル付けされた dom 要素内の入力と選択は、デフォルトの幅を使用しています。幅をより適切に制御するには、次のようなものを使用します。

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

味にwidth: 100%合わせて編集します。width: 123px

score 0 · Accepted Answer

これはうまくいくかもしれません：

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

4 に答える 4