如何显示 html 和 css select 垂直和水平滚动条

Question

我尝试了以下仅显示水平滚动条的 HTML 和 CSS。我可以通过键盘垂直滚动。如何显示垂直滚动条以便用户也可以通过鼠标滚动？

<html>
<header><title>This is title</title></header>
<style>
.myDiv {
max-width: auto !important;
max-height: auto !important;
overflow:scroll !important;
display: block;
width: 60% !important;
height: 60% !important;
border: 1px solid #ccc;
}

.mySelect {
width: auto !important;
height: auto !important;
min-width: auto !important;
border : none !important;
overflow: hidden !important;; 
}
</style>

<body>
Hello world <br/>

<table>
    <tr>
        <td align="left"><input type='button' value='button'/></td>
    </tr>
        <td>
        <table>
        <tr>
            <td>
                <div id="divTest"  class="myDiv">
                <select class="mySelect" id="group" size="20" multiple="">
                    <option value="16c" title="test123">test123</option>
                    <option value="19c" title="course one">course one</option>
                    <option value="29c" title="Sample 1">Sample 1</option>
                    <option value="34c" title="test">test</option>
                    <option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activityyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</option>
                    <option value="72c" title="hindi "subject"">hindi "subject"</option>
                    <option value="73c" title="maths "practical"">maths "practical"</option>
                    <option value="123c" title=" Inserting Todayäó»s Date"> Inserting Todayäó»s Date</option>
                    <option value="126c" title="Social Forum Course">Social Forum Course</option>
                    <option value="170c" title="Platinum 4000">Platinum 4000</option>
                    <option value="16c" title="test123">test123</option>
                    <option value="19c" title="course one">course one</option>
                    <option value="29c" title="Sample 1">Sample 1</option>
                    <option value="34c" title="test">test</option>
                    <option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activity 000000000000000000000000000000000000000000000000000000000000000000</option>
                    <option value="72c" title="hindi "subject"">hindi "subject"</option>
                    <option value="73c" title="maths "practical"">maths "practical"</option>
                    <option value="123c" title=" Inserting Todayäó»s Date"> Inserting Todayäó»s Date</option>
                    <option value="126c" title="Social Forum Course">Social Forum Course</option>
                    <option value="170c" title="Platinum 4000">Platinum 4000</option>
                    <option value="16c" title="test123">test123</option>
                    <option value="19c" title="course one">course one</option>
                    <option value="29c" title="Sample 1">Sample 1</option>
                    <option value="34c" title="test">test</option>
                    <option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activityyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</option>
                    <option value="72c" title="hindi "subject"">hindi "subject"</option>
                    <option value="73c" title="maths "practical"">maths "practical"</option>
                    <option value="123c" title=" Inserting Todayäó»s Date"> Inserting Todayäó»s Date</option>
                    <option value="126c" title="Social Forum Course">Social Forum Course</option>
                    <option value="170c" title="Platinum 4000">Platinum 4000</option>
                    <option value="16c" title="test123">test123</option>
                    <option value="19c" title="course one">course one</option>
                    <option value="29c" title="Sample 1">Sample 1</option>
                    <option value="34c" title="test">test</option>
                    <option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activity 000000000000000000000000000000000000000000000000000000000000000000</option>
                    <option value="72c" title="hindi "subject"">hindi "subject"</option>
                    <option value="73c" title="maths "practical"">maths "practical"</option>
                    <option value="123c" title=" Inserting Todayäó»s Date"> Inserting Todayäó»s Date</option>
                    <option value="126c" title="Social Forum Course">Social Forum Course</option>
                    <option value="170c" title="Platinum 4000">Platinum 4000</option>
                    <option value="16c" title="test123">test123</option>
                    <option value="19c" title="course one">course one</option>
                    <option value="29c" title="Sample 1">Sample 1</option>
                    <option value="34c" title="test">test</option>
                    <option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activityyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</option>
                    <option value="72c" title="hindi "subject"">hindi "subject"</option>
                    <option value="73c" title="maths "practical"">maths "practical"</option>
                    <option value="123c" title=" Inserting Todayäó»s Date"> Inserting Todayäó»s Date</option>
                    <option value="126c" title="Social Forum Course">Social Forum Course</option>
                    <option value="170c" title="Platinum 4000">Platinum 4000</option>
                    <option value="16c" title="test123">test123</option>
                    <option value="19c" title="course one">course one</option>
                    <option value="29c" title="Sample 1">Sample 1</option>
                    <option value="34c" title="test">test</option>
                    <option value="59c" title="Course with assignment and face to face activity">Course with assignment and face to face activity 000000000000000000000000000000000000000000000000000000000000000000</option>
                </select>
                </div>
        </td>
        </tr>
        </table>
        </td>
    <tr>
</table>
</body>
</html>

Answer 1

您可以将样式标签的所有内容替换为：

.mySelect {
    max-width: 60%;
    max-height:60%;
    overflow: auto;
}

如何显示 html 和 css select 垂直和水平滚动条

how to show html and css select scroller bar for both vertical and horizontal

html

css

select

side-scroller