使用 Bootstrap(使用 Firefox 浏览器)的表单上,选择控件缺少箭头图标

2024-02-29

我在使用 Bootstrap(使用 Firefox 浏览器)的表单上有一个选择控件,但它缺少右侧的箭头图标:

这是我使用的相关 HTML:

<div class="container-fluid">
    <form id="form" method="post" action="process.php">
        <div class="form-group">
            <label class="lbl" for="choose">Choose</label>
            <select class="form-control" id="choose" name="choose" required>
                <option value="Foo">Foo</option>
                <option value="Bar">Bar</option>
            </select>
        </div>
        <input type="submit" name="button" value="Submit" class="btn-primary">
        <input type="button" name="cancel" value="Cancel" class="btn-primary" onclick="clkcnc();">
    </form>
</div>

这是我在这些元素上使用的唯一 CSS:

body {
    font-size: 20px;
}
.form-control {
    padding-top: 6px;
}
.lbl {
    padding-top: 6px;
}

在我的表单上使用 Bootstrap 时,我想使用 form-control 类使该控件看起来像其他控件,但此选择控件看起来更像文本输入。

Update

此问题与使用不同的分辨率有关(通过 Firefox 中的响应式设计模式)。在我的例子中,分辨率为 480 x 854。当我关闭该模式时,浏览器将在 1600 x 900 的屏幕分辨率内显示,选择控件将正常显示,并在右侧显示箭头图标。不幸的是,我需要页面以窄分辨率工作。以下是我的基本页面设置中的元设置:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, 
user-scalable=no">

以下是来自 link2pk 的小提琴结果:


  1. 升级到 Bootstrap v5.2 +
  2. 如果使用 Bootstrap v5,请尝试 form-select 而不是 form-control(请参阅:https://getbootstrap.com/docs/5.0/forms/select/ https://getbootstrap.com/docs/5.0/forms/select/ )
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Bootstrap(使用 Firefox 浏览器)的表单上,选择控件缺少箭头图标 的相关文章

  • 更改元素的顺序

    我正在创建一个浮动宽度的网站 用户在智能手机上使用从全高清分辨率到约 600 像素的屏幕 这似乎是一个不错的主意 这就带来了一个非常有趣的问题 当用户使用比最佳分辨率更小的分辨率时 页面的高度会增加很多 这意味着更改某些元素 例如某些图像
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • jQuery - 如何从 div > p 获取文本

    如何从 div 类中获取主题名称 div class subject img src image eng jpg p English p div div class subject img src image bio jpg p Biolo
  • 获取 FileReader() 的结果对象

    有什么方法可以在不通过函数的情况下获取 FileReader 的结果对象 我在下面制作了示例代码 HTML br br br div div JS var code lorem ipsum input type file change fu
  • 我如何能够以两行显示标题,并且每行的字体大小不同?

    我正在使用 Google Chart API 创建时间线图 并希望将图的标题修改为两行 问题 我如何能够显示具有不同字体大小的两线图表标题 电流输出 理想输出 相关研究 我唯一能找到的是有人试图用饼图来做到这一点 但我尝试了但无法使其发挥作
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
  • php - 解析html页面

    div divbox div p para1 p p para2 p p para3 p table class table tr td td tr table p para4 p p para5 p 有人可以告诉我如何解析这个 html
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C

随机推荐

  • 如何将 WooComerceAPI 集成到 React 中?

    我想通过 API 在 React 上接收数据到我的网站 我按照文档中所述执行了所有操作 执行了安装npm install save woocommerce api 使用文档中的参数创建对象http woocommerce github io
  • 无法验证包:727047181.itmsp

    我在存档文件后在应用程序商店中上传了构建版本 它将在我收到此错误时上传构建版本 1 Apple的Web服务操作不成功 2 无法验证包 727047181 itmsp 3 错误 ITMS 9000 无法更改捆绑包标识符的当前值 ue com
  • 使用 PHP 从 Google Chrome 书签导出中提取数据

    我想将我的 google chrome 书签放入数据库 所以我的第一步是使用 PHP 从 chrome 导出 html 文件并将数据放入变量中 我希望获得一些能够运行的 PHP 代码下面的数据 它会将 URL ADD DATE ICON 和
  • 无法通过管道以自定义方式重命名下载的图像

    我使用 python 的 scrapy 模块创建了一个脚本 从 torrent 站点下载并重命名电影图像 并将它们存储在 scrapy 项目内的文件夹中 当我按原样运行脚本时 我发现它正确地下载了该文件夹中的图像 此时 脚本正在使用 req
  • javascript从所选国家/地区值中选择城市

    我有来自这里的国家数据库http www webmasterworld com html 3018309 htm http www webmasterworld com html 3018309 htm有239个国家 每个国家都有价值 在选
  • 这个指针类型防水吗?

    我正在尝试设计一种自定义类型 可以在需要窗口句柄或其他类型指针的 API 中使用 并且适用于 VBA 可以运行的所有系统 这是我所得到的 If Win64 1 And VBA7 0 Then Public Type LongLong 64
  • Chart.js 上的悬停模式

    当您未将鼠标悬停在折线图中的特定 点 上时 是否可以激活悬停 I want that每当我将鼠标悬停在图表的任何部分上时就会激活特定的工具提示 Edit 像这样的东西http watchstocks herokuapp com http w
  • 减少纬度和经度点数的最快方法

    我正在尝试减少并组合一些点到这些位置的中心点 现在 我通过找到最接近的一对 将它们组合起来并重复 直到将其减少到我的目标 旁注 实际上我通过排序来减少问题 lat lat long long 然后在每个点的两侧搜索 10 根据我的测试 总是
  • Swift 框架在 lldb 中返回“模糊使用”方法扩展

    我已升级到 Xcode 11 和 swift 5 并在通过框架提供方法扩展时遇到了问题 更具体地说 在一个结构如下的项目中 gt Main Project gt Framework created from sources in Main
  • Keras 1.0 支持 scipy 稀疏矩阵吗?

    我找不到关于 keras 是否支持 scipy 稀疏矩阵作为训练 测试向量的明确答案 我已阅读此链接 这似乎意味着它没有https www kaggle com c walmart recruiting trip type classifi
  • R闪亮滑块输入显示时间

    我有一个与 R Shiny 中的 sliderInput 相关的问题 在 sliderInput 中 该值是一个数字 一些示例显示该数字是 number 但是 如果我想将 sliderInput 的值显示为时间 例如 10 00 15 00
  • 如何循环匹配正则表达式的所有元素?

    案例如下 我想找到与正则表达式匹配的元素 targetText SomeT1extSomeT2extSomeT3extSomeT4extSomeT5extSomeT6ext 我在 javascript 中使用正则表达式 如下所示 reg n
  • Xcode 自动完成块内块(以及它们所在的块......)

    如何设置一个块属性 该属性将另一个块属性作为参数 以便自动完成功能为两个块提供所有必需的参数 为了进一步解释 我将演示自动完成功能如何仅适用于一个块属性 In AppDelegate h 为所有需要访问 block 属性的类创建一个引用 A
  • 如何阻止 PHP 向客户端发送数据,同时仍在服务器中运行 PHP 代码?

    当我遇到一个导致我的 PHP 程序无限循环的错误时 我想到了这个问题 下面是一个示例情况 假设我有一个接收图片上传的PHP网页 该页面可能是图像上传表单的响应页面 在服务器中 脚本应将图像存储在临时文件中 然后 脚本应该向客户端输出一条确认
  • 预处理 C# - 检测方法

    我需要能够预处理多个 C 文件作为项目的预构建步骤 检测方法的开始 并在方法的开始处 任何现有代码之前 插入生成的代码 但是 我在检测方法的打开时遇到问题 我最初尝试使用正则表达式进行匹配 但最终出现了太多误报 我会使用反射 但 Metho
  • Firebase 查询数据

    random key 1 id 0 text This is text random key 2 id 1 text This is text 如果我像这样存储数据 并且我想获取节点id等于0 我怎样才能做到这一点 上面是孩子issue 它
  • Angular2组件单向绑定还是输入?

    在角度 2 中 如果我看到
  • AWS Cloud9:Python 虚拟环境并未实际激活。使用系统范围的Python

    刚刚开始使用 AWS Cloud9 开始了一个新项目 Django with Beanstalk 打开Cloud9环境 输入virtualenv python usr bin python3 6 venv 然后 当我输入 sourse ve
  • 如何安装 VS 2017 的 SignTool.exe?

    升级到 VS 2017 后我得到了 错误 签名时发生错误 找不到 SignTool exe 但仅在 Visual Studio 上使用 MSbuild 发布是没有问题的 我已经检查过文件夹 C Program Files x86 Micro
  • 使用 Bootstrap(使用 Firefox 浏览器)的表单上,选择控件缺少箭头图标

    我在使用 Bootstrap 使用 Firefox 浏览器 的表单上有一个选择控件 但它缺少右侧的箭头图标 这是我使用的相关 HTML div class container fluid div