英文:
Why is my dropdown list showing differently on phone than desktop and how can I fix it?
问题
I have a normal select/option setup for a dropdown list and on desktop it looks like normal:
在桌面上，我有一个正常的选择/选项设置，看起来正常：
However, on the phone it instead uses some native phone list, something that looks like this:
但是，在手机上，它使用了一些本机手机列表，类似于这样：
This could be all fine, the problem is that in some places I have made my own multi select dropdown list which looks like this:
这可能都没问题，问题在于在某些地方，我制作了自己的多选下拉列表，看起来像这样：
Questions
问题
-
Can I somehow force all devices to use the same type of dropdown on a normal select/option setup?
-
我是否可以以某种方式强制所有设备在正常的选择/选项设置上使用相同类型的下拉列表？
-
Should I?
-
我应该吗？
-
If not, would you recommend me to create my own dropdown lists too so that I get the same behaviour for both normal and multiple select dropdown lists? It is sort of ugle when one dropdown shows as e.g. native android and one as a "normal" dropdown on the phone.
-
如果不是这样，您是否建议我也创建自己的下拉列表，以便在正常和多重选择下拉列表上获得相同的行为？当一个下拉列表显示为本机Android风格，而另一个在手机上显示为“正常”下拉列表时，这有点丑陋。
英文:
I have a normal select/option setup for a dropdown list and on desktop it looks like normal:
However, on the phone it instead uses some native phone list, something that looks like this:
This could be all fine, the problem is that in some places I have made my own multi select dropdown list which looks like this:
This list will show like this on both desktop and phone, since it is just made up of divs.
Questions
- Can I somehow force all devices to use the same type of dropdown on a normal select/option setup?
- Should I?
- If not, would you recommend me to create my own dropdown lists too so that I get the same behaviour for both normal and multiple select dropdown lists? It is sort of ugle when one dropdown shows as e.g. native android and one as a "normal" dropdown on the phone.
答案1
得分: 1
<Select> 是一个本地组件。
什么是本地组件？
本地组件是一种使用阴影容器将本地操作系统组件添加到HTML站点的HTML元素。与浏览器绘制整个元素不同，它依赖于操作系统来执行此操作。诸如<button>、<a>、<div>、<span>等等的元素将具有自己的绘制过程。然而，<select> 元素使用操作系统提供的内容。任何样式能力都非常有限。
从技术上讲，Web浏览器可以实现自己的<select>元素的“绘制”，但这并不值得，因为大多数人都创建自己的下拉组件。<select> 元素实际上只是为开发人员提供某种东西来使用 - 可以将其视为一个快速的小型微应用程序。
尽管你可以向<select>元素的“button”部分添加大多数CSS样式，但不能对下拉进行样式设置。下拉不是<option>标签，而是<select>元素的一部分。这是因为选项标签只是向选择组件提供要显示哪些选项的信息（它们只是数据容器）。下拉框是100%本地的，无法进行样式设置。
你能强制所有设备使用相同的下拉框吗？
不能。这是不可能的。每个Web浏览器都有自己处理<select>元素的实现方式。Firefox绘制自己的下拉框。Safari和Chrome使用本地的macOS/Windows/Linux/iOS/Android下拉框。这些不可配置，你受制于操作系统/火狐浏览器。
你应该强制所有设备使用相同的下拉框吗？
是的。要实现这一点，可以使用自定义组件方法。你将不得不实现自己的下拉组件。大多数网站都这样做，以提供统一的用户界面和体验。
英文:
<Select> is a native component.
What is a native component?
A native component is an HTML element that uses shadow containers to add native OS components to an HTML site. Rather than the browser drawing the entire element, it relies on the operating system to do this. Elements like <button>, <a>, <div>, <span>, any many more will have their own drawing process. A <select> element, however, uses whatever the operating system provides. Any styling capabilities are very limited.
Technically, a web browser could implement their own "drawing" of a <select> element, but this is not worth the effort because most people create their own dropdown components. The <select> element really just exists to provide something for developers to use – think a quick small micro-application.
Although you may be able to add most CSS styles to the "button" part of the select element, you cannot to the dropdown. The dropdown is not the <option> tags, but rather still a part of the <select> element. This is because the option tags just provide information to the select component about which options to show (they are just data containers). The dropdown is 100% native and cannot be styled.
Can you force all devices to use the same dropdown?
No. This is impossible. Each web browser has their own implementation on how to handle the <select> element. Firefox draws their own dropdowns. Safari and Chrome use the native macOS/Windows/Linux/iOS/Android dropdowns. These are not configurable and you are at the mercy of the OS/firefox.
Should you force all devices to use the same dropdown?
Yes. The way you would accomplish this, is by using the custom component method. You will have to implement your own dropdown. Most sites do this to provide a uniform user interface and experience.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论