如何只用CSS设计下拉选择框

在构建网站时，网站导航起着重要的作用，因为它包含下拉列表。在一个或多个导航中存在的各种列表的集合被称为下拉列表。要创建下拉列表，需要使用select和option元素。option元素在select元素下使用，收集各种类型的列表，如产品、科目、课程等。

在本文中，我们将使用仅CSS来设计下拉选择框。

语法

<select>
   <option value="option_value">option1</option>
   <option value="option_value">option1</option>
</select>

select元素用于创建下拉列表。这个元素通常用于表单中收集用户数据。
option元素存储了可供用户在下拉列表中看到的一组列表。

使用的属性

在示例中使用了以下属性：

position - 定义元素在输出中的定位方式。
overflow - 指定元素中内容的流动方式。
display - 定义元素是行内元素还是块级元素。
width - 定义列表的宽度。
height - 定义列表的高度。
line-height - 定义行框的高度。
border-radius - 定义元素的圆角。
padding-bottom - 定义元素的底部空间。
color - 定义文本的颜色。
background-color - 定义页面的背景颜色。
background - 定义背景的颜色。

示例

在这个示例中，我们将使用内部CSS来定义下拉列表的所有属性。然后，我们将设置内联属性给body元素，以在网页上创建更好的用户交互。要开始下拉列表，我们首先使用select元素。在select元素内部，option元素用于收集所有主题的列表。为了对每个列表进行样式化，我们将使用内联CSS属性，使其看起来更好。因此，我们将只使用CSS来设计下拉列表。

<!DOCTYPE html>
<html>
<head>
   <style>
      .dropdown-list {
         position: relative; 
         overflow: visible;
         display: block;
         width: 19em;
         height: 2em;
         line-height: 2;
         border-radius: 30em;
         padding-bottom: 10px;
         background: orange;
         outline: 0;
         appearance: none;
      }
    </style>
</head>
<body style="background-color:#b2d6c0;">
   <center>
      <h1 style="color:darkgreen;">Tutorialspoint</h1>
      <div class="dropdown-list">
         <select>
            <option style="background:pink;" value="School Subject ">School Subjects</option>
            <option style="background:pink;" value="Math">Math</option>
            <option style="background:pink;" value="Science">Science</option>
            <option style="background:pink;" value="Social Science">Social Science</option>
            <option style="background:pink;" value="English">English</option>
            <option style="background:pink;" value="Hindi">Hindi</option>
        </select>
     </div>
   </center>
</body>
</html>