Javascript 更改已创建多选下拉框的样式和位置_Javascript_Html_Css

Javascript 更改已创建多选下拉框的样式和位置

javascript html css

Javascript 更改已创建多选下拉框的样式和位置,javascript,html,css,Javascript,Html,Css,我正在尝试为web应用程序创建前端。我已经用python开发了后端。我对网页设计/开发这一领域还不熟悉我有一些html和javascript代码，它们使用jQuery multiselect.css和jQuery multiselect.js创建下拉式multiselect检查表。但是，我对如何更改下拉列表的样式或位置感到困惑，因为我已经在使用jQuery multiselect.css 我在head标签下添加了css和js <link href="jquery.multiselec

我正在尝试为web应用程序创建前端。我已经用python开发了后端。我对网页设计/开发这一领域还不熟悉

我有一些html和javascript代码，它们使用jQuery multiselect.css和jQuery multiselect.js创建下拉式multiselect检查表。但是，我对如何更改下拉列表的样式或位置感到困惑，因为我已经在使用jQuery multiselect.css

我在head标签下添加了css和js

  <link href="jquery.multiselect.css" rel="stylesheet"> 

  <script src="jQuery.js"></script> 
  <script src="jQuery-MultiSelect-master/jquery.multiselect.js"></script>

然后我用html创建下拉列表，并使用jQuery对其进行初始化

<select id='testSelect1' multiple>
  <option value='1'>Item 1</option>
  <option value='2'>Item 2</option>
  <option value='3'>Item 3</option>
  <option value='4'>Item 4</option>
  <option value='5'>Item 5</option>
</select>

<script src="./test.js"></script>
<script>
   $('#testSelect1').multiselect({
   columns: 4,
   placeholder: 'Select Countries',
   selectAll: true
 });
</script>


项目1
项目2
项目3
项目4
项目5
$（'#testSelect1'）。多选({
栏目：4，
占位符：“选择国家”，
selectAll:真
});

这会将multiselect置于左侧，并使下拉列表宽度与页面宽度和高度一样宽，比所需的更长。我试图修改它，使它出现在中间，下拉的大小不是下拉数组的颜色和颜色，

当你将样式和脚本添加到Project时，它看起来应该是这样的

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

    <!-- style goes here -->

  </head>
  <body>

    <!-- scripts go here -->
  </body>
</html>

再说一遍。发布一些截图，如果没有帮助，用它更新问题