T之家3月31日消息 据Chromium官方博客，在过去的一年中，Google Chrome团队和微软Edge团队合作，“对Chromium浏览器中的内置表单控件进行了主体化和改进”，改善了按钮、下拉菜单、复选框等HTML控件的UI及体验。

另个团队致力于“一致且易于感知”的新UI，采用新主题的HTML控件在设计上更加现代及平面化。

重新设计前 vs. 重新设计后

除了改进默认样式，两个团队还调整了表单控件的可访问性以及增强对触摸的支持，比如采用自适应背景、更加清晰的“对焦环”，增加了适配多显示器的点击目标大小，以及改进了拾色器等。

IT之家注意到目前这些改进在Windows版的Edge上已经可用，在Chrome 81上需要开启以下flag标记：

• 访问chrome://flags/#form-controls-refresh；

• 下拉菜单改为Enable；

• 重启浏览器。

重新设计的控件将于5月中旬在macOS、Windows和Chrome OS版本的Chrome上可用，晚些时候Android版也将进行类似的改进。

• 们先看一下最终效果。

一、开始吧，我们先做一个盒子drop，它以后要装的是按钮和下拉列表。

二、在盒子drop里面做一个按钮dropbt。

三、按钮有点丑了，于是我们给按钮加点样式。

四、下面我们做出下拉列表，它们是一串链接，我们用一个盒子dropbox装着。

五、列表是横着的，而且不怎么好看，我们先改超链接a的样式。

六、菜单列表好看许多了，我们给列表盒子dropbox加点样式，比如阴影。

七、再好看的菜单列表一开始也是要先隐藏的。

八、我们让鼠标移到按钮上时，按钮颜色变浅。

九、现在可以设置点击后，下拉菜单出现了。

十、下拉菜单出现了，但你会发现鼠标在右侧时，菜单也会弹出来，我们改一下样式，解决这个问题，再次移过去的时候，你会发现只有在按钮位置才会弹出菜单了。

十一、完善一下，当鼠标移动菜单列表时，背景色改变。

猪脚本（原飞猪脚本）以按键精灵教学为主,涉及UiBot，Python,Lua等脚本编程语言,教学包括全自动办公脚本,游戏辅助脚本,引流脚本,网页脚本,安卓脚本,IOS脚本,注册脚本,点赞脚本,阅读脚本以及网赚脚本等各个领域。想学习按键精灵的朋友可以添加金猪脚本粉丝交流群:554127455 学习路上不再孤单,金猪脚本伴你一同成长.

1.什么是网页元素特征字符串？

请参考网页特征字符串详解；

2.Html系列命令

2.1.HtmlSelect命令

1）HtmlSelect命令只能够根据Select项的值来进行选择，注意这里不是显示在Select项上的文字，而是该项的value。

一个典型的下拉框HTML代码如下：

<select name="city">

<option value="1">北京</option>

<option value="2">上海</option>

<option value="3">广州</option>

</select>

这里如果要选择上海，需要选择值为2的项；

2）级联的下拉列表组合。

在有的网页中，会有几个级联的下拉列表，后一个下拉框会随前一个框的值变化而发生变化，典型的有注册页面上的省份城市选择，HtmlSelect命令能够触发Onchange事件，会导致后一个下拉框值发生变化，但是如果执行脚本太快，而导致后一个未能选中正确的值，可以在前一个HtmlSelect后加上适当的延时；

3）多选表单中的列表控件；有的列表支持多选，在有一些个求职网站中，职业是可以多选的，这时候可以用%将多个需要选择的值连接起来传递给HtmlSelect命令实现多选；

2.2.HtmlExists命令

HtmlExists命令，能够判断指定特征的元素是否存在，并能够返回具备该特征的元素的个数。这个命令能够用来判断某个元素是否存在，如果为0证明不存在；

2.3.HtmlGet命令

HtmlGet命令比较复杂，但是功能也非常强大，该命令具备两个参数，第一个参数为获取类型，目前支持的值如下所示：

序号 值 适用对象

1 text 得到指定元素的文本值，对应DOM属性innerText

2 html 得到指定元素内部的HTML代码，对应DOM属性innerHTML

3 outerHtml 得到元素整体的HTML代码，对应DOM属性的outerHTML

4 value 得到元素的Value值，用于获取表单元素内部的值

5 src 得到图像元素的src属性，用于IMG标签对象

6 href 得到链接元素的链接地址，用于A标签

7 …其他名称 其他属性，如果您使用的是合法的属性名称，就能够返回对应的值。如何才是合法的属性？请参阅HTML标准。

第二个参数为特征字符串，如果匹配多个，只能返回第一个元素的值；

例如，获得淘宝货物价格：

Plugin price=Web.HtmlGet("text","id:id_Price")

获取某个表单文本的值

Plugin email=Web.HtmlGet("value","name:Email")

2.4.RunJS命令

RunJS命令提供了直接运行Javascript的功能，如果您对JS非常熟悉，就能够极大的扩展WQM的功能。

RunJS命令支持两中执行方式，第一个参数设置为0时，能够执行一段没有返回值的Javascript，

例如：

RunJS(0,"alert('hello');")

第一个参数设置为1时，能执行一段js并返回由return语句返回的值，返回值为字符串类型；

例如：返回Html文档的title；

RunJS(1,"var t=document.title;return t;")

如果您分析到网页中某个按钮实际上就是执行了一个函数，例如

<input type="Button" … />

您就可以直接调用

RunJS(0,"dosomething();")

JQuery的支持，网页按键精灵集成了Jquery1.3.2，为了不与其他JQ的库发生冲突，使用了wqmjq来代替$操作符，如果您需要直接使用JQ来操作网页，可使用wqmjq来执行Jquery语句：

RunJS(0,"wqmjq('#test').click();")