用户界面控件GUI元素，类似于列表框，允许用户从列表中选择一个值。当下拉列表处于非活动状态时，它会显示单个值。激活后，它会显示（下拉）一个值列表，用户可以从中选择一个值。
的当前值。我该怎么做？
safari中的Mac和iOS设备，带有背景颜色的<select>元素在自身上产生了光泽。 这似乎没有在其他操作系统中发生。 ，例如，我有一个具有这些样式属性的选择元素： select { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 3px 6px; margin: 10px 0 7px; width: 250px; background-color: #BD2786; color: white; letter-spacing: -.04em; font-weight: bold; border: 0; } 我的元素具有我想要的背景颜色，但是光泽仍然存在。 有人知道如何使其变成纯色吗？ 您可以使用此CSS属性： -webkit-appearance: none; 注意，这也导致箭头图标消失。请参阅其他答案以添加它们的方法。 请参见Http：//trentwalton.com/2010/07/14/css-webkit-appearance/ 使用-webkit-appearance:none;将删除箭头，表明这是一个下拉列表。 请参阅该片段，使其在不同的浏览器上工作，添加自定义箭头，而无需包含任何图像文件： select{ background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%; -moz-appearance: none; -webkit-appearance: none; appearance: none; /* and then whatever styles you want*/ height: 30px; width: 100px; padding: 5px; } <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> 如果您想另外设置组件的背景颜色，然后在背景值末端添加逗号和颜色，例如... no-repeat 95% 50%, red; 2019版本 shorter inline图像URL，仅显示向下箭头，可自定义的箭头颜色... 从Https：//codepen.io/jonmircha/pen/pevqpa 作者可能是乔纳森·米尔奇（Jonathan Mircha） select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat; background-size: 12px; background-position: calc(100% - 20px) center; background-repeat: no-repeat; background-color: #efefef; } 2022UPDATE 这里是一种干净的解决方案，可以通过设置appearance:none并保持下拉箭头来消除Safari光泽的样式，而无需链接到外部背景图像。 将下拉列表分配到DIV中，并以三角形的形状赋予它边框属性。请注意，这是在Div.的after选择器上 Html： <div class="select-dropdown"> <select> <option value="Null">Favorite Fruit</option>" <option value="Brooklyn">Apples</option> <option value="Manhattan">Plums</option> <option value="Queens">Oranges</option> </select> </div> CSS： .select-dropdown:after { content: " "; position: absolute; top: 50%; margin-top: -2px; right: 8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid white; } codepen上的flash伙伴的信用 追求堆积在旧物品上。我在这里找到了我问题的部分答案，但必须做一些工作，所以我想分享下一个人的结果。 我最终使用与其他贡献者相同的方法，但是进行了一些调整以修复以下 长文本涵盖了其他解决方案中的箭头 所使用的图像有些古老而丑陋的上/下组合箭头。 以下将为您提供一个工作解决方案，其解决方案可以解决以上问题。注意：我为我的用例使用了白色箭头，您可能需要更改箭头的颜色。 这里是一个预览： select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9IkxheWVyXzEiICAgZGF0YS1uYW1lPSJMYXllciAxIiAgIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjAyIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciICAgICBpZD0ibmFtZWR2aWV3NDIwMCIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGlua3NjYXBlOnpvb209Ijg0LjMiICAgICBpbmtzY2FwZTpjeD0iMi40NzQ5OTk5IiAgICAgaW5rc2NhcGU6Y3k9IjUiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIiAvPiAgPGRlZnMgICAgIGlkPSJkZWZzNDE5MCI+ICAgIDxzdHlsZSAgICAgICBpZD0ic3R5bGU0MTkyIj4uY2xzLTJ7ZmlsbDojNDQ0O308L3N0eWxlPiAgPC9kZWZzPiAgPHRpdGxlICAgICBpZD0idGl0bGU0MTk0Ij5hcnJvd3M8L3RpdGxlPiAgPHBvbHlnb24gICAgIGNsYXNzPSJjbHMtMiIgICAgIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIiAgICAgaWQ9InBvbHlnb240MTk4IiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=) no-repeat 101% 50%; padding-right:20px; } 检查-Webkit -Affearance：无及其衍生物。最初由克里斯·科耶（Chris Coyer）描述：https：//css-tricks.com/almanac/properties/a/appearance/ 在这里提到好几次 -webkit-appearance:none; 也可以去除箭头，这在大多数情况下不是您想要的。 我发现的轻松解决方案就是简单地使用select2而不是选择。您也可以重新使用Select2元素，最重要的是，Select2在Windows，Android，iOS和Mac.上看起来相同。 我已经使用了它并解决了我的 -webkit-apperance：无; 2025版本？ 我一直想使用SVG图像添加自定义下拉箭头，还用我的CSS变量颜色。 这就是我的做法 - Html： // Wrap select element with div or something <div class="container"> <select> <option></option> </select> </div> CSS： select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .container { position: relative; } .container::after { content: ""; position: absolute; -webkit-mask-image: url('data:image/svg+xml;utf8,<svg> ~ </svg>'); mask-image: url('data:image/svg+xml;utf8,<svg> ~ </svg>'); top: 2px; right: 8px; width: 1.5rem; height: 1.5rem; background-color: var(--my-color); pointer-events: none; } 如果您检查Chome的用户代理样式表，您会发现此 outline: -webkit-focus-ring-color auto 5px; 简称其轮廓属性 - 使其不 应该消除光芒
我必须从页面上的下拉列表中选择选项。我尝试了以下代码，但它显示了语法错误。有人可以帮我吗？ web_element x = driver.find_element_by_xpath（'//*[@ID =“
add dataSource to dropDownList：错误databinding：'system.data.common.datarecordinternal'不包含带有名称
Text = Name, Value = Id
请任何人告诉我如何在CSS中进行下拉菜单，我尝试了所有内容，但它根本不起作用 ` ＆l ...
为什么隐藏的元素会更改vuetify选择的大小？ （条件渲染）
我有一个vuetify选择我想在选择太多元素时要限制文本的位置。 因此，我使用条件渲染来显示我想要的东西： 我有一个vuetify选择我想在选择太多元素时要限制文本的位置。 我使用条件渲染来显示我想要的东西： <v-col cols="auto"> <v-select label="Select" :items="items" hide-details v-model="selectedItems" multiple> <template v-slot:selection="{ index, item }"> <div v-if="allSelected"> <v-chip v-if="index == 0">All selected</v-chip> </div> <div v-else-if="selectedItems.length > 1"> <v-chip v-if="index == 0">{{selectedItems.length}} selected</v-chip> </div> <div v-else> <v-chip v-if="index == 0">One selected</v-chip> </div> </template> </v-select> </v-col> 您可以看到，只有3个分支（all，some，one），每个分支只显示一个分支。但是根据所选项目数量，v-chip需要或多或少的空间。 当将COLS更改为特定数字时，当没有足够的空间时，高度会增加。 Playground 在这里，您可以看到选择根据元素的数量更改大小。 仍然创建每个项目的Divs，仅具有宽度/高度为0。 父select定义.v-field__input，这意味着每个0px divs中的每一个都将被2PX分开，这就是为什么添加元素时输入成长的原因（每个元素为2px）。同样，divs上也有一个定义。 仅覆盖这些规则，以阻止SELECT与所选项目数量的数量（假设在V-Select上设置的自定义类别）： column-gap: 2px; 看了
这是我用来动态创建下拉菜单的部分。 // 助手：创建下拉菜单 const createDropdown = (id, options, selectedOption = [], labelText, isMultiSelect = false) => { 控制台.log(`
简单的东西，但找不到。我想要一个带有几个选择的简单下拉选择框。像html一样 1 2 ... 简单的东西，但找不到。我想要一个带有几个选择的简单下拉选择框。像html <select> <option>1</option> <option>2</option> </select> QML的代码是什么？ there是一个简单的例子，可以用作起点： import QtQuick 1.0 Rectangle { width:400; height: 400; Rectangle { id:comboBox property variant items: ["Item 1", "Item 2", "Item 3"] property alias selectedItem: chosenItemText.text; property alias selectedIndex: listView.currentIndex; signal comboClicked; width: 100; height: 30; z: 100; smooth:true; Rectangle { id:chosenItem radius:4; width:parent.width; height:comboBox.height; color: "lightsteelblue" smooth:true; Text { anchors.top: parent.top; anchors.left: parent.left; anchors.margins: 8; id:chosenItemText text:comboBox.items[0]; font.family: "Arial" font.pointSize: 14; smooth:true } MouseArea { anchors.fill: parent; onClicked: { comboBox.state = comboBox.state==="dropDown"?"":"dropDown" } } } Rectangle { id:dropDown width:comboBox.width; height:0; clip:true; radius:4; anchors.top: chosenItem.bottom; anchors.margins: 2; color: "lightgray" ListView { id:listView height:500; model: comboBox.items currentIndex: 0 delegate: Item{ width:comboBox.width; height: comboBox.height; Text { text: modelData anchors.top: parent.top; anchors.left: parent.left; anchors.margins: 5; } MouseArea { anchors.fill: parent; onClicked: { comboBox.state = "" var prevSelection = chosenItemText.text chosenItemText.text = modelData if(chosenItemText.text != prevSelection){ comboBox.comboClicked(); } listView.currentIndex = index; } } } } } Component { id: highlight Rectangle { width:comboBox.width; height:comboBox.height; color: "red"; radius: 4 } } states: State { name: "dropDown"; PropertyChanges { target: dropDown; height:40*comboBox.items.length } } transitions: Transition { NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 } } } } 对于新用户，QT5.3Qtquick.controlscombobox-compore..中有一个内置ComboBox 文档中的示例： import QtQuick 2.2 import QtQuick.Controls 1.2 ComboBox { id: combo editable: true model: ListModel { id: model ListElement { text: "Banana"; color: "Yellow" } ListElement { text: "Apple"; color: "Green" } ListElement { text: "Coconut"; color: "Brown" } } onAccepted: { if (combo.find(currentText) === -1) { model.append({text: editText}) currentIndex = combo.find(editText) } } } 注：我不得不将其作为答案，因为文本要长时间发表评论。 我一直在使用ComboBoxStyle（自定义功能有限）和完全自定义实现的方法，但是它们在focus管理和管理方面有很多限制。 我最终以2部分组成的实现the的实现：您实际上放置在某个地方的标题和您动态创建的下拉组件。后者包括覆盖所有内容（和拦截鼠标活动）和一个小心位于标头下方的下拉列表组成。 代码非常庞大，可以在此处包含，因此您可以在我的博客文章中查看所有代码中的详细信息。 如果您针对诺基亚设备（Symbian或Meego），则可以使用高级QT快速组件。我相信z-index是类似于HTML的ComboBox。 请参见Http：//doc.qt.nokia.com/qt-components-symbian/qml-menu.html或http：//harmattan-dev.nokia.com/docs/docs/docs/docs/library/library/library/html/html/qt-ctml/qt-components /qt-components-meego-menu.html 如果您针对Symbian，则有SelectionListItem和SelectionDialog： http：//doc.qt.nokia.com/qt-components-symbian/qml-selectionlistitem.html
沃尔沃 Saab Mercedes <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> 我需要添加一个搜索栏，这将使我可以从列表中过滤不需要的选项。我需要使用SELECT，并且需要在没有插件的情况下执行此操作，最简单的方法是什么？我尝试使用Select2插件，但它搞砸了我的整个应用程序，因为它取决于以前的开发人员编写的逻辑。数据人群已经得到照顾，因此我无需做任何事情来填充它。 我还需要指出，我需要能够在文本框中键入，HTML5 SELECT不允许我执行此操作，并且能够拥有一个下拉箭头，使我可以看到完整的列表。我们可以通过一些技巧独自与HTML5一起做，或者我需要很多JavaScript来做到这一点？ 使用<datalist>元素 <label for="cars">Search cars: <input list="cars" name="cars" type="text"> </label> <datalist id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </datalist> the batter您使用<datalist> <select> 注：Internet Explorer 9和更早版本或Safari中不支持Datalist标签。 您说的是“没有插件”，但是您可以看一下jQuery选择的插件。 出于类似的原因，我对Select2并不疯狂。 我现在正在使用选择的选择。 很容易添加到我使用标准选择的现有应用程序中。 似乎选择使用您的现有选择，将其隐藏起来，但是正确标记了选定的项目，因此形式处理继续起作用。 可能需要样式以适合您的应用程序样式。
我创建了一个文本字段，其中有一个带有文本字段历史记录的下拉按钮。我担心的是，该字段将用于显示 IP 地址，这不符合我想要的
使用 Apps 脚本在 Google Sheet 中创建 Chips 下拉列表
我有一个 Apps 脚本代码，可以根据另一个下拉列表动态创建一个下拉列表，但生成的下拉列表没有芯片： 有什么方法可以在 Apps Sc 中自定义下拉样式...
选择下拉选项。如何在 React select 中为下拉选项之一打开日期和时间选项
我正在尝试制作食物配送 React 应用程序。在起始页上我有选项 立即交付 安排交货 当我选择下拉菜单并选择安排交付选项时，我需要日期和...
我正在使用 vuejs 和 tailwindcss。 如何从 HTML select 元素中删除默认箭头？ 我已经尝试过用 css 删除外观： 选择 { -moz-外观：无； -webkit-appe...