Dropdowns get a lot of flak from the UI world – and if we are honest, it’s not without reason. Done badly, they become cumbersome, overwhelming, and ugly. But that’s not what this cheat sheet is about. Here we will talk about what to do when you

下拉菜单从UI世界中引起了很多反响-坦白说，这并非没有道理。 做得不好，它们变得笨拙，不堪重负且丑陋。 但这不是备忘单的目的。 在这里，我们将讨论您做什么时

have to use them.必须使用它们。

I also want to clarify that there are two main types of dropdowns: those used for navigation and those used in forms. For this cheat sheet’s purpose, we will just be looking at the form variant.

我还想澄清一下，下拉菜单主要有两种：用于导航的下拉菜单和用于表单的下拉菜单。 出于备忘单的目的，我们将仅关注表单变体。

In this cheat sheet, we will go over the following:

在本备忘单中，我们将介绍以下内容：

1. Anatomy解剖学
2. Dropdown types and variations下拉菜单类型和变体
3. Dropdown styles下拉样式
4. Dropdown states下拉状态
5. What the placeholder should say占位符应该说什么
6. When not to use a dropdown (and when to)何时不使用下拉菜单(以及何时使用)
7. Native dropdowns本机下拉菜单
8. Accessibility checklist辅助功能清单
9. Closing thoughts总结思想

1.解剖学 (1. Anatomy)

The anatomy of a dropdown is very similar to that of a text input field - plus a bit more. To compare the two, see this earlier story.

下拉菜单的解剖结构与文本输入字段的解剖结构非常相似-还要多一点。 比较两个，看看这个较早的故事。

2.下拉菜单类型和变体 (2. Dropdown types and variations)

While standard dropdowns are widely understood, there are a few different types and variations that you may need to consider for your next endeavour. Please note that for these examples I am only including dropdowns used in forms and not those used in navigation.

虽然标准下拉列表得到了广泛的理解，但是您可能需要考虑几种不同的类型和变体，以进行下一步的工作。 请注意，对于这些示例，我仅包括表单中使用的下拉列表，而不包括导航中使用的下拉列表。

标准下拉菜单 (Standard dropdown)

The standard dropdown is what we think of when we hear the word ‘dropdown’. In its active state, it should look very similar to a text input field until you click on it and it opens up a menu.

标准下拉菜单是我们听到“下拉菜单”一词时想到的。 在其活动状态下，它应该看起来与文本输入字段非常相似，直到您单击它并打开一个菜单。

自动建议下拉 (Dropdown with autosuggest)

I love these sexy bad boys. The first time I was aware of autosuggest was in Google’s search field; however, I have no idea where it was first implemented. (Let me know if you do.) It is especially useful when you have long lists where the user already knows the answer (e.g. what country you are from).

我爱这些性感的坏男孩。 我第一次意识到自动提示是在Google的搜索字段中。 但是，我不知道它是在哪里实现的。 (让我知道您是否愿意。)当您的用户已经知道答案的清单很长时(例如您来自哪个国家/地区)，该功能特别有用。

具有自动完成和建议功能的下拉菜单 (Dropdown with autocomplete and autosuggest)

Autosuggest isn’t to be confused with autocomplete. Autosuggest is when the input field reveals options for the user to select from. Autocomplete is when the input puts forward a way to complete the word or phrase.

自动建议不要与自动完成混淆。 自动建议是当输入字段显示供用户选择的选项时。 自动完成是指输入提出一种完成单词或短语的方法。

Autocomplete fields are sometimes disguised as text inputs until you start typing.

有时，自动完成字段会伪装成文本输入，直到您开始输入为止。

多选下拉菜单 (Dropdown with multi-select)

While most dropdowns are an extension of radio buttons (in that you can only choose one item), this dropdown is an extension of checkboxes: the user can select multiple items in one input field.

虽然大多数下拉列表是单选按钮的扩展(因为您只能选择一个项目)，但此下拉列表是复选框的扩展：用户可以在一个输入字段中选择多个项目。

If possible, try to avoid this guy. I’ve had to use it due to an insanely long list of categories, and I still wake up at night in cold sweats over that decision. Ideally, one would want an autosuggest & autocomplete combo.

如果可能，请尽量避免使用此人。 由于类别的种类繁多，我不得不使用它，而对于这个决定，我仍然在夜间冒着大汗。 理想情况下，将需要一种自动建议和自动完成的组合。

分组下拉 (Dropdown with groups)

While long dropdowns are not ideal, you can group some of the items under different categories to make searching for what you want easier.

虽然长下拉列表并不理想，但是您可以将一些项归为不同类别，以使搜索所需内容更加容易。

多选菜单 (Multiple select menu)

While not technically a dropdown, a multiple select menu is an alternative to consider. Unlike a dropdown, they are open from the start and are basically a little scroll window.

从技术上讲，下拉菜单不是一个下拉菜单，但是可以考虑选择多个菜单。 与下拉菜单不同，它们从一开始就是打开的，并且基本上是一个小的滚动窗口。

While they are fine for desktop, they are kind of awful for mobile as they are a ‘scroll within a scroll’.

虽然它们对于台式机来说很好，但是对于移动设备来说却很糟糕，因为它们是“滚动中的滚动”。

I, personally, have only ever used this pattern once (under duress, I might add), and I seldom see them in the wild. If anyone has any more information on them, please let me know in the comments :)

我个人仅使用过这种模式一次(在胁迫下，我可能会补充一点)，我很少在野外看到它们。 如果有人对他们有更多的信息，请在评论中让我知道:)

日期选择器 (Date picker)

Date pickers should only be used for scheduling meetings, events, etc. Having a calendar with the days of the week is great for helping you decide when to organise brunch but is incredibly annoying if you want to enter your passport expiry date. I like the ones where you can type as well as select from the dropdown – just make sure the input is clever enough to add ‘/’ between your months, days, and years, otherwise it gets a bit confusing.

日期选择器仅应用于安排会议，活动等。使用带有星期几的日历可以帮助您确定何时组织早午餐，但是如果您想输入护照的有效期，则非常令人讨厌。 我喜欢您可以在其中键入以及从下拉列表中进行选择的选项，只需确保输入足够聪明，即可在您的月，日和年之间添加“ /”，否则会造成一些混乱。

Tess’s guide on how to make people hate you:

苔丝关于如何让人讨厌你的指南：

1. When asking people to enter the day their card or passport expires, give them calendar dropdown menu. They especially care to see exactly what day of the week that their card will expire.当要求人们输入其卡或护照的失效日期时，请给他们日历下拉菜单。 他们特别在意看卡在一周的哪一天到期。

2. When asking users to input their date of birth, use a dropdown calendar. Bonus points: Make sure that the only way that they can navigate through the years is by clicking through each month. Bonus bonus points: This design pattern is especially useful on online forms for retirement home applications.

   当要求用户输入出生日期时，请使用下拉日历。 奖励积分 ：确保他们浏览年份的唯一方法是单击每个月份。 奖励积分 ：这种设计模式在退休家庭申请的在线表格上特别有用。

Date pickers and date range pickers are complicated beasts, so I haven’t gone into too much detail here, but maybe one day I will do a special date picker cheatsheet. Maybe.

日期选择器和日期范围选择器是复杂的野兽，因此在这里我没有做太多详细介绍，但是也许有一天我会做一个特殊的日期选择器备忘单。 也许。

3.下拉样式 (3. Dropdown styles)

Unlike dropdown types, ‘dropdown styles’ refers to how the dropdown actually looks and not how it works. Below I have listed some of the common styles.

与下拉列表类型不同，“下拉列表样式”是指下拉列表的实际外观，而不是其工作方式。 下面，我列出了一些常见的样式。

标准样式(随附) (Standard style (attached))

I call this style the ‘standard’ because it is what we are most used to seeing.

我将此样式称为“标准”，因为这是我们最常看到的。

标准款式(独立式) (Standard style (detached))

I am seeing the style with the detached menu more and more. Which makes sense as it allows the menu to sit above or below the field depending on the browser viewport.

我越来越多地看到带有分离菜单的样式。 这很有意义，因为它允许菜单根据浏览器视口位于字段的上方或下方。

圆角边框 (Rounded borders)

Rounded borders work great with UIs that have a more playful persona.

圆角边框可用于具有更有趣角色的UI。

带图标 (With icons)

Adding a simple icon to the beginning of an input can make it look more ‘designed’. Whenever someone complains that a form looks too boring (‘Well Steve, its a form with 20 inputs – what did you think it was going to look like?’), I just add icons. It is a simple fix.

在输入的开头添加一个简单的图标可以使其看起来更具“设计性”。 每当有人抱怨表单看起来很无聊时(“史蒂夫，它的表单有20个输入-您认为它看起来像什么？”)，我只添加图标。 这是一个简单的修复。

Lazy Designer Tip: If someone complains about a long form looking boring just add icons. It’s a tried and true method that requires almost no effort and your product owner will think you are the best thing since Sunday morning pancakes.

懒惰的设计师提示：如果有人抱怨一个长的表格看起来很无聊，只需添加图标即可。 这是一种经过实践检验的真实方法，几乎​​不需要任何努力，您的产品所有者将认为您是自周日早上薄煎饼以来最好的东西。

带图片 (With images)

As a rule, I avoid adding images to items in a dropdown – just because the maintenance behind having to update it is a pain, especially if it is a list that changes a lot. However, it is very useful when you want to show the difference between things (dog breeds, cakes, office furniture, etc).

通常，我避免在下拉列表中将图像添加到项目中–只是因为必须更新图像而导致的维护工作很麻烦，尤其是当列表变化很大时。 但是，当您想要显示事物之间的差异(狗的品种，蛋糕，办公家具等)时，此功能非常有用。

However, I am of the opinion that, due to the limited size in a dropdown, it is very difficult to see what the images are (see above graphic) so it usually isn’t worth the effort unless you make the images really big.

但是，我认为，由于下拉列表的大小有限，很难看到图像是什么(请参见上图)，因此除非您将图像变大，否则通常不值得付出努力。

Material Design的已填充下拉列表 (Material Design’s filled dropdowns)

Readers of the cheat sheet series will know that I am a big fan of Material Design, including their dropdowns.

备忘单系列的读者会知道，我是Material Design(包括其下拉菜单)的忠实拥护者。

The ‘line only’ field is no longer in use in the Material Design guidelines, but you will still see it lurking around the internet. If you want to learn more, I wrote about this in the previous cheat sheet and Dave Chui replied here.

“材料设计”准则中不再使用“仅行”字段，但是您仍会看到它潜伏在互联网中。 如果您想了解更多，我在上一个备忘单中写过有关此内容，Dave Chui 在这里回答。

The ‘line only’ field was replaced with the ‘filled dropdown’ and it seems to be doing better in user testing. Not as cool, but much more user-friendly – and that’s what it is all about, folks.

“仅行”字段已替换为“填充的下拉列表”，在用户测试中似乎做得更好。 不那么酷，但是更加用户友好–伙计们，这就是全部。

Material Design的概述下拉列表 (Material Design’s outlined dropdowns)

Like their outlined text fields, Material Design’s outlined dropdowns are super cool. Their menu is detached from the actual dropdown container which can help with some usability issues.

像其轮廓文本字段一样，Material Design的轮廓下拉列表非常酷。 他们的菜单与实际的下拉容器分离，可以帮助解决一些可用性问题。

I am sure you all would have seen this sexy little animation where on-focus the label gets smaller at the top of the input . I would also like to point out something that often gets overlooked (by me): If you look at the actual dropdown, you will notice that the first item is blank. This is so that the user can ‘reset’ the dropdown if they want to come back to that question later or to leave it blank.

我敢肯定，大家都会看到这个性感的小动画 ，在焦点上方，标签在输入的顶部变小。 我还想指出一些经常被(我)忽略的内容：如果查看实际的下拉列表，您会注意到第一项是空白的。 这样，如果用户想稍后再返回该问题或将其留空，则可以“重置”下拉列表。

4.下拉状态 (4. Dropdown states)

When a user interacts with an input of any sort, the input should switch states or appearances to give the user feedback. Here we will be looking at the different states of dropdowns.

当用户与任何类型的输入进行交互时，输入应切换状态或外观以向用户提供反馈。 在这里，我们将研究下拉菜单的不同状态。

活跃状态 (Active state)

The active state is what the dropdown will look like before the user has interacted with it.

激活状态是下拉列表在用户与其进行交互之前的外观。

残障人士 (Disabled)

If you disable an input field, users won’t be able to interact with it but they will be able to see it. You may use this if your business rules require it, but that probably won’t be very often.

如果禁用输入字段，则用户将无法与其进行交互，但是他们将能够看到它。 如果您的业务规则需要它，则可以使用它，但是这种情况可能不会很常见。

徘徊 (Hover)

If the user hovers over a dropdown, it should indicate that it is clickable.

如果用户将鼠标悬停在下拉菜单上，则应指示该下拉菜单是可单击的。

N00b tip: You can’t hover on touch devices, so don’t design states for these if you are designing for mobile or tablet apps.

N00b提示：不能将鼠标悬停在触摸设备上，因此，如果要针对移动或平板电脑应用程序进行设计，则不要为其设计状态。

高亮状态 (Highlight state)

The highlighted state is when a user is using a tabbing map (this is when a user uses ‘tab’ to navigate an interface and ‘enter’ to input information) and highlights the dropdown before selecting it. We typically see this as the ‘blue halo’ on clickable items.

高亮显示状态是用户使用制表图时(这是用户使用“制表符”导航界面并使用“输入”输入信息)并在选择下拉菜单之前将其突出显示的状态。 我们通常将其视为可点击项的“蓝色光环”。

However, some sites combine the highlight and focus state so that even if the user doesn’t click ‘enter’, the dropdown opens straight away. I am torn as to what is the best system. Logically, combining the two states makes sense; however, I get so confused when dropdowns open without me explicitly telling them to. Has anyone else had experience with this? Let me know in the comments.

但是，某些网站结合了突出显示和焦点状态，因此，即使用户未单击“输入”，下拉菜单也会立即打开。 我对什么是最好的系统感到困惑。 从逻辑上讲，将两个状态结合起来是有意义的； 但是，当下拉菜单打开时我没有明确告诉他们，我会感到非常困惑。 有其他人对此有经验吗？ 在评论中让我知道。

焦点状态 (Focus state)

Focus state is when the item is interactable. Once you have clicked on the dropdown, it will open up a menu and display its options.

焦点状态是项目可交互的时间。 单击下拉菜单后，它将打开一个菜单并显示其选项。

While a lot of the drops downs I have interacted with keep the arrow pointing in the same direction in both active and focus states, I prefer to swop the arrow’s direction. I think of them in the same way as an accordion. And if you are super cool, you can animate the arrow’s change in direction.

尽管我参与了许多下拉操作，但在活动状态和焦点状态下，箭头都指向相同的方向，但我更喜欢将箭头的方向滑动。 我以与手风琴相同的方式来思考它们。 而且，如果您超酷，则可以为箭头的方向变化设置动画。

As the user hovers over the items in the menu, it should display which option is being hovered over.

当用户将鼠标悬停在菜单上的项目上时，它将显示正在悬停的选项。

输入完成 (Completed input)

Once the user has chosen an option, the input should snap or animate back to the active state, except it will have the chosen item displayed.

一旦用户选择了一个选项，输入将被捕捉或激活回到活动状态，除非它将显示所选的项目。

失败反馈 (Fail feedback)

With free text input, it is possible for a user to make a typo, etc. However, since the options in a dropdown are predetermined, there should only be one type of fail feedback: the ‘incomplete’ type, which the user will only receive if they click the ‘submit’ button before they finished filling out the form.

使用自由文本输入时，用户可以打错字等。但是，由于下拉菜单中的选项是预先确定的，因此应该只有一种类型的失败反馈：“不完整”类型，用户只会如果他们在填写表单之前单击“提交”按钮，则会收到。

5.占位符应该怎么说 (5. What the placeholder should say)

As a general rule, I would keep the placeholder/prompt text similar to that of your free text fields. Still not sure? Here are a few options for you:

通常，我将使占位符/提示文本与您的自由文本字段相似。 还不确定吗？ 以下是您的一些选择：

将占位符留空 (Leave the placeholder blank)

Leaving the placeholder blank is usually the easiest option if the other text fields don’t have placeholders.

如果其他文本字段没有占位符，通常最简单的选择是将占位符留空。

在占位符中有通用提示 (Have a generic prompt in the placeholder)

‘- Select -’, ‘Choose’, etc. are the classic prompts to put in a dropdown.

“-选择-”，“选择”等是放置下拉菜单的经典提示。

在占位符中使用促销词 (Having a promoting phrase in the placeholder)

Using a generic ‘Select’/‘Choose’ and then the thing you want them to select is a kind of cool way to keep a level of consistency across your dropdowns but also to give your users a prompt as to what to do.

使用通用的“选择” /“选择”，然后让他们选择的东西是一种很酷的方法，可以使下拉菜单保持一定的一致性，同时还可以向用户提示要做什么。

在占位符中显示一个选项 (Surface an option in the placeholder)

While you have the option to surface a preselected item in a dropdown, you do have to be careful to make sure the that the user has seen and read it – otherwise they may be consenting to something they wouldn’t want to. #classicDarkPatternMove

尽管您可以选择在下拉菜单中显示预选的项目，但您必须小心确保用户已阅读并阅读该项目-否则，他们可能会同意他们不希望的内容。 #classicDarkPatternMove

So what option should you choose? When in doubt, opt for consistency. If your text fields all have placeholders, use placeholders.

那么，您应该选择哪种选择呢？ 如有疑问，请选择一致性。 如果您的文本字段都具有占位符，请使用占位符。

6.何时不使用下拉菜单(以及何时使用) (6. When not to use a dropdown (and when to))

This is dedicated to all the sites that make me input my year of birth using a dropdown: f*** you. I don’t need any more reminder of my rapidly increasing age by scrolling through a whole list of months until I eventually find the year I was born.

这专用于所有使我使用下拉列表输入出生年份的站点：f ***您。 通过滚动浏览整个月份列表，直到我最终找到自己的出生年份，我再也不需要提醒我自己的年龄Swift增长。

如果您的选择少于五个 (If you have fewer than five options)

If you have fewer than five options, it is probably easier to use radio buttons instead of using the extra click to get to all the list options. Anything more than five options starts to take up a lot of space.

如果选项少于五个，则使用单选按钮可能比使用额外的单击进入所有列表选项更容易。 超过五个选项的任何内容都开始占用大量空间。

Note: Some people say that the rule should be fewer than six, not fewer than five, but I, but I will let you be the judge of that.

注意 ：有人说规则应该少于六个，不小于五个，但是我，但我会让你做这件事的判断者。

如果键入比选择更容易 (If it would be easier to type than to select)

If it would take your user less time to type than to select something from a dropdown, do you really have to ask which is better? For a birth date, for example, it would be easier to type the date than to use three separate dropdowns.

如果您的用户键入时间比从下拉列表中选择内容要少，那么您真的必须问哪个更好吗？ 例如，对于出生日期，键入日期要比使用三个单独的下拉菜单容易。

Sometimes developers may argue against this, as it is easier to make a dropdown than to set up all the rules about what users can and can’t enter in free text fields. I alas, have lost this battle many times, but I continue to fight the good fight.

有时，开发人员可能会对此表示反对，因为进行下拉菜单比设置关于用户可以在自由文本字段中输入和不能输入的规则更容易。 我a，这仗已经输了很多次，但我仍在继续打好仗。

如果您有两个选择，并且它们分别为“开”和“关”(或“是”和“否”) (If you have two options and they are ‘on’ and ‘off’ (or ‘yes’ and ‘no’))

Having a dropdown with two options is a bit annoying. Especially with ‘yes/no’ questions. Toggles solve this nicely for these types of questions.

有两个选项的下拉列表有点烦人。 特别是“是/否”问题。 切换可以很好地解决这些类型的问题。

如果选项是数字的 (If the options are numeric)

If your options are numeric, you have a few options.

如果您的选项是数字选项，则有几个选项。

The first is, once again, letting them type it out. Steppers are also helpful, but I would only suggest this if the behaviour is expected to go to max five. Otherwise, your poor user will be sitting there clicking to 100.

首先是让他们再次输入。 步进器也很有帮助，但是我只建议在预期行为达到最大值5的情况下建议这样做。 否则，您的可怜用户将坐在那里，单击为100。

The second is using a slider to select the value. Sliders are especially helpful for larger numbers or approximations.

第二个是使用滑块选择值。 滑块对于较大的数字或近似值特别有用。

如果有很多选择 (If there are a lot of options)

If there are a lot of options in a dropdown (which you should avoid if possible), let the user ‘search’ for their option. The most common time to see this type of behaviour is with country dropdowns, as they are vast but also easy to answer. As mentioned earlier, this is best paired with an autocomplete.

如果下拉菜单中有很多选项(如果可能，应避免使用)，让用户“搜索”他们的选项。 看到这种行为的最常见时间是在国家/地区下拉列表中，因为它们很大但也很容易回答。 如前所述，最好与自动完成功能搭配使用。

那么，什么时候应该使用下拉菜单？ (So, when should you use a dropdown?)

An input needs to meet two requirements for me to consider using a dropdown:

输入需要满足两个要求，以便我考虑使用下拉列表：

1. There are more than six options.

   有六个以上的选择 。

2. When the options aren’t something that a user would know straight away. For example, imagine your user was uploading a video and the host needed to know what kind of licence to attach to the video. An average user wouldn’t know all the options available on the platform, making a dropdown necessary.

   如果选项不是，则用户会立即知道。 例如，假设您的用户正在上传视频，并且主持人需要知道附加到视频的许可证类型。 普通用户不会知道平台上的所有可用选项，因此需要下拉列表。

7.本机下拉菜单 (7. Native dropdowns)

We tend to use native or default options when time and budget is tight or when we are working on an MVP. Having custom inputs are the frosting on the cake, but sometimes we don’t have the option to make that sweet, sweet icing. In that instance, it is good to know what you have to work with.

当时间和预算紧张或正在处理MVP时，我们倾向于使用本机或默认选项。 有了自定义输入是锦上添花，但是有时候我们没有选择制作甜美的糖衣。 在这种情况下，很高兴知道您必须使用什么工具。

Native dropdowns are just safer as well when it comes to usability across different devices.

当涉及跨不同设备的可用性时，本机下拉菜单也更安全。

Our large-scale checkout usability testing and benchmarking reveal that while 82% of e-commerce sites use custom designed drop-downs in the checkout flow, 31% of all custom designed drop-downs have significant usability issues. - Christian Holst, view story here

我们的大规模结帐可用性测试和基准测试表明，尽管82％的电子商务网站在结帐流程中使用了定制设计的下拉菜单，但所有定制设计的下拉菜单中有31％都存在严重的可用性问题。 - 克里斯蒂安·霍尔斯特 ( Christian Holst)， 在这里 查看故事

默认值 (The defaults)

Here are some examples of native dropdowns in the wild. To try for yourself, go here: https://html.com/attributes/option-selected/

以下是野外原生下拉列表的一些示例。 要自己尝试，请访问此处： https : //html.com/attributes/option-selected/

As you can see in these examples, they are all slightly different depending on their platform and browser. They aren’t pretty, but they are very usable.

正如您在这些示例中看到的那样，它们都略有不同，具体取决于它们的平台和浏览器。 它们不漂亮，但是非常有用。

使用外壳 (Using a shell)

I used to call this ‘semi-custom’, but I recently found an article that called this pattern a shell – and that sounds far more official. So I vow to henceforth call it a shell, and I also vow to use it in meetings and bask in the power of people asking me what it means, just so that I can show off how clever I am.

我曾经称其为“半习惯”，但最近我发现有一篇文章将此模式称为外壳 -听起来更加正式。 因此，我发誓称其为外壳，并且还发誓要在会议中使用它，并晒晒人们的力量，问我这是什么意思，以便让我炫耀自己的聪明。

‘BUT what is a shell?’, you ask. A shell is when a field looks custom, but when you click it, it uses the native dropdown styling. This is a simple way of keeping the style of the page looking consistent with your brand and lowering dev cost. It also helps with all the UX issues that come with custom fields.

“但是什么是外壳？”，你问。 外壳是指字段自定义的外观，但单击该外壳时会使用本机下拉样式。 这是一种使页面样式与您的品牌保持一致并降低开发成本的简单方法。 它还有助于解决自定义字段随附的所有UX问题。

8.辅助功能清单 (8. Accessibility checklist)

1. Is the active state of the dropdown (label included) more than 44px? (We include the label in this because if you click the label, the dropdown should still open.)下拉菜单(包括标签)的活动状态是否超过44像素？ (我们在其中包含标签，因为如果您单击标签，则下拉菜单仍将打开。)
2. Is each line item in the dropdown menu more than 44px high with 8px in between?下拉菜单中的每个订单项是否都超过了44像素(高8像素)之间？
3. Do the colours meet the AAA compliance standards?颜色是否符合AAA合规标准？
4. Does your dropdown have a highlighted state?您的下拉菜单有突出显示状态吗？
5. Make sure that the dropdowns work on a tabbing map.确保下拉菜单在选项卡地图上有效。
6. If you do use a custom dropdown, make sure that it can open up or down in the instance that the browser viewport is too low down.如果您确实使用了自定义下拉菜单，请确保在浏览器视口过低的情况下它可以打开或关闭。

And, when in doubt, go visit https://webaim.org/techniques/forms/controls

并且，如果有疑问，请访问https://webaim.org/techniques/forms/controls

As my usual reader will know, it’s been a while since I have written one of these, and I am sorry it has taken so long. But, by golly, it’s good to back. And, you know, there’s nothing like a global pandemic to get you back to writing.

正如我通常的读者所知道的，距我编写其中的一篇文章已有一段时间了，对不起，花了这么长时间。 但是，天哪，倒退是一件好事。 而且，您知道，没有什么比全球大流行更能让您重新开始写作了。

Dropdowns get a lot of hate – and rightly so. But sometimes there are few feasible alternatives, and, if that is the case, you should make your ugly little dropdowns the best that they could possibly be.

下拉菜单会引起很多仇恨-的确如此。 但有时几乎没有可行的替代方法，如果是这种情况，则应使您的难看的小下拉列表尽可能地好。