如何使用CSS选择自定义菜单
#css #教程 #selenium #automationtesting

当涉及UI组件时，我们可以使用两种通用方法为您的网站构建它：我们可以使用著名库或框架中的预构建组件，或者我们可以从Scratch开发我们的UI组件。

开发独特的CSS组件是一个更好的策略，因为我们可以将它们作为开发人员提供更多控制权，并且可以在需要时更改值。作为前端开发人员已有三年多的时间，使自定义选择的下拉列表组件用于导航，从列表中选择选项或过滤提供的选择是构建用户接口的最常见需求之一。

< select >标签有几种用例库，包括引导程序，材料UI和ANT设计，并且每个图书馆都有自己的自定义CSS选择下拉菜单的实现。它们非常可靠，并且已经证明了跨浏览器功能。

image

来源

跨浏览器下拉造型非常具有挑战性。设计师总是会创建有吸引力的下拉列表，但是每个浏览器都会使它们略有不同。您可以从Browser Engines: The Crux Of Cross Browser Compatibility.上的此博客中了解有关浏览器渲染的更多信息

考虑跨浏览器功能时，使用CSS框架或库是有益的，因为它们处理创建特定组件所涉及的所有幕后任务。

使用这些CSS libraries和Bootstrap或Tailwind CSS等框架时，跨浏览器功能是最重要的，因为最终用户使用不同的操作系统，浏览器和设备。如果我们希望每个人都有相同的经验，我们应该只使用在所有设备，操作系统和浏览器上都可以正常工作的库和框架。大多数现代框架都认为需要cross browser compatibility并保持设备友好的样式。

在自定义CSS选择菜单上的这个深入博客中，我们将介绍创建各种自定义CSS选择菜单的过程。

所以，让我们开始！

Emulators Online lambdatest允许您在移动浏览器和移动设备上无缝测试移动应用程序，网站和Web应用程序。

什么是html选择标签？

HTML元素< select >代表带有选择菜单的控件。通常，我们使用Select元素创建下拉列表。 < select >元素最常以表格来收集用户输入。

选择标签使用各种属性，可提供有关HTML元素的其他详细信息。如果我们省略了名称属性，则不会提交下拉列表中的数据。需要ID属性将下拉列表与标签相关联。 元素。 标签，并且给出了用户各种选择。它可能类似于选择各种状态或国家，或者甚至可能使用下拉列表在页面之间切换。


以下是用于构建选择部分的源代码。

html： 

<select name="Phone" id="Phone">
  <option value="Realme">Realme</option>
  <option value="Redmi">Redmi</option>
  <option value="Iphone">Iphone</option>
  <option value="Samsung">Samsung</option>
    <option value=”Pixels">Google Pexels</option>
</select>

输出： 

<html>
  <body>
  <select name="Phone" id="Phone">
  <option value="Realme">Realme</option>
  <option value="Redmi">Redmi</option>
  <option value="Iphone">Iphone</option>
  <option value="Samsung">Samsung</option>
    <option value="OPPO">OPPO</option>
    <option value="Google Pexel">Google Pixel</option>

</select>

  <select name="Phone" id="Phone">
      <option value="Chrome">Chrome</option>
      <option value="Firefox">Firefox</option>
      <option value="Safari">Safari</option>
      <option value="Edge">Edge </option>
    </select>



</body>

</html>

代码的输出如下：

image

这很简单，是一个不错的起点。现在，让我们添加自定义CSS，使其看起来和设计友好。

CSS： 

select{
    width: 10%;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 5px;
    padding: 10px;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    color: #555;
    background-color: rgb(255, 255, 255);
    background-image: none;
    border: 1px solid rgb(41, 18, 18);
}
select>option{
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    color: #555;
    background-color: rgb(247, 247, 247);
    background-image: none;
    font-size: 18px;
    height: 50px;
    padding: 15px;
    border: 1px solid rgb(41, 18, 18);
}

输出：

image

Black Box testing ？不用担心；我们将介绍什么是黑匣子测试，优点，缺点，类型和技术。

尽管使用了样式，但< select >标签的样式几乎没有改变。这是因为它们不是通常的dom元素，使它们与他人的行为不同。

对于开发人员而言，< select >和< option >元素是最令人沮丧的形式控件，因为它们缺乏样式支持。这是因为它们是由操作系统渲染的，而不是HTML。只有几个可以应用于< option >的样式属性。由于它是多少UX战斗，我们将研究其他解决方案。

image

上面的图像清楚地表明，将样式应用于<选项>标签无法按预期工作。由于浏览器在DOM模型之外生成它们，因此诸如click click on click或键盘之类的事件无法运行。

通过