javascript - 更改创建的多选下拉复选框的样式和位置

标签 javascript html css

我正在尝试为 Web 应用程序创建前端。我已经有了用 python 开发的后端。我是这个网页设计/开发领域的新手

我有一些 html 和 javascript 代码,它们使用 jQuery multiselect.css 和 jQuery multiselect.js 创建下拉式多选 list 。但是我对如何更改下拉菜单的样式或位置感到困惑,因为我已经在使用 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>

这会将多选放在左侧,并使下拉宽度与页面宽度和高度一样宽,然后需要更长的时间。我正在尝试对其进行修改,使其出现在中间,并且下拉列表的大小没有那么小,下拉列表数组的颜色也不同

最佳答案

当您向元素添加样式和脚本时,它应该如下所示

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

    <!-- style goes here -->

  </head>
  <body>

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

样式始终位于文档顶部,介于 <title></title> 之间标签。建议将脚本放在 <body> 之前标签关闭。 Here你可以读懂为什么

有那个..

如果您想首先设置下拉菜单的样式,我们需要看看它看起来是否正确,因为我们无法盲目地帮助您。但是你可以这样做

select {
 <!-- style for select goes here -->
}

select option {
 <!-- style for option goes here -->

如果你希望你的选择是300px宽你可以添加这个

select {
  width: 300px;
}

再次。如果这没有帮助,请发布一些屏幕截图并用它更新问题

关于javascript - 更改创建的多选下拉复选框的样式和位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58791845/

相关文章:

javascript - 无法从js调用真棒字体

javascript - 如何使用 grunt-contrib-imagemin 的插件无损优化图像?

javascript - 在多个数组上使用 ng-repeat

html - 一种 CSS 样式仅适用于本地主机而不适用于服务器托管

html - 为什么 HTML Canvas rounded lineCap 对于最后一段失败?

javascript - window.open 出现问题

php - 相对 Div 内的绝对 Div 的响应高度

javascript - 在字符串对象中查找匹配模式

javascript - html 按钮重定向到 &lt;input&gt; 中指定的页面

php - 在php中的div内发布输入框值