问题描述
我正在使用标准的 input 元素，该元素在移动设备和浏览器中的呈现方式不同
<input type="color" />浏览器：
移动：
为什么会这样？我更喜欢浏览器版本，所以如果我可以强制浏览器渲染，那就太好了
解决方法
为什么会这样？
他们使用运行平台的标准颜色选择器小部件。
应用程序之间 UI 的一致性是一种美德。
我可以强制浏览器渲染
你不能。
最接近的方法是从头开始实现自己的颜色选择器，或者使用完全绕过本机控件的库。
,来自<input type="color"> MDN Web Docs：
元素的呈现可能因浏览器和/或平台而异——它可能是一个简单的文本输入，它会自动验证以确保以正确的格式输入颜色信息，或者是平台标准的颜色选择器，或某种自定义颜色选择器窗口。
不幸的是，无法“强制”进行特定的演示。
在 'Appearance variantions' 中，您会找到一些在不同设备（如 macOS 系统颜色选择器）上的示例。
,public class Test {
private void clearFields(final int i) {
switch (i) {
case 0:
boardId = "";
case 1:
stateId = "";
case 2:
cityId = "";
case 3:
schoolId = "";
case 4:
classId = "";
case 5:
orientationId = "";
case 6:
studentTypeId = "";
break;
default:
System.err.println("Invalid index supplied");
}
}
private String boardId;
private String stateId;
private String cityId;
private String schoolId;
private String classId;
private String orientationId;
private String studentTypeId;
public static void main(final String[] args) {
final Test test = new Test();
test.setValues();
test.printValues();
for(int i = 0; i <= 6; i++) {
test.clearFields(i);
test.printValues();
test.setValues();
}
}
private void setValues() {
boardId = "boardId";
stateId = "stateId";
cityId = "cityId";
schoolId = "schoolId";
classId = "classId";
orientationId = "orientationId";
studentTypeId = "studentTypeId";
}
private void printValues() {
System.out.println("boardId = " + boardId);
System.out.println("stateId = " + stateId);
System.out.println("cityId = " + cityId);
System.out.println("schoolId = " + schoolId);
System.out.println("classId = " + classId);
System.out.println("orientationId = " +orientationId);
System.out.println("studentTypeId = " + studentTypeId);
System.out.println();
System.out.println();
}
}
样式取决于系统默认样式。
如果您想要统一的样式，请尝试使用外部库，例如
Simonwep pickr