web-dev-qa-db-ja.com

単一選択のHTMLリストボックスの高さ

「リストボックス」（ドロップダウンボックスではなく、複数のアイテムを同時に表示するボックス）として表示したいHTML <select>があります。ただし、1つのアイテムのみを選択できるようにしたい。また、（CSSを介して）ボックスの高さをコンテナサイズの100％に設定したいと思います。

これらの3つのことは相互に排他的であるように思われます。 <select>要素のmultiple属性を設定すると、コントロールがドロップダウンではなくリストボックスとしてレンダリングされます。ただし、複数の要素を選択したくないので、これは機能しません。 <select>をリストボックスにする他の唯一の方法は、size属性を1より大きい値に設定することです。これによりボックスの高さも設定されます。 HTML属性が設定されている場合、CSSを介して高さを変更することはできません。

htmlcssselectlistbox
12
Craig Walker

<select>を、それを含む<form>の高さの100％にすることができます。フォームを囲むdivの例については、 このフィドル を参照してください。selectはフォームの高さを埋めます。

これは単純な構造から始まります。フォームが何かで囲まれているので、相対的なレイアウトを確認できます。

<div>
    <form>
        <select id="thelist" size="4">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
        </select>
    </form>
</div>

Divに高さ、背景を指定して表示し、コンテンツが自然にカバーされないようにパディングします。 divの100％を含め、フォームを任意の高さにします。私はそれを90％にしたので、あなたはまだ囲んでいるdivを見ることができます。フォームの幅が、パディングを除いてdivの幅を埋めていることに注意してください。

次に、選択リストの高さをフォーム内の任意の高さに設定できます。これが私のCSSです

div {
    background-color: #fff0f0;
    height: 40em;
    padding: 1.5em 1.5em 0 1.5em;
}
form {
    background-color: #f0f0f0;
    height: 90%;
}
#thelist {
    height: 100%;
}

スニペットとしてまとめ、ここに収まるように小さくします...

div {
    background-color: #fff0f0;
    height: 20em;
    padding: 1.5em 1.5em 0 1.5em;
}
form {
    background-color: #f0f0f0;
    height: 40%;
}
#thelist {
    height: 100%;
}
<div>
    <form>
        <select id="thelist" size="4">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
        </select>
    </form>
</div>
14
Stephen P

選択ボックスに境界線を付けて高さを設定するだけです。それは私のために働いた。

select.custom-select-box {

border: 1px solid #999;

height: 28px;

}

0
Jazmin