如何为"选择"框创建占位符?

htmlweb developmentfront end technology更新于 2024/6/18 23:08:17

HTML 中提供了 placeholder 属性来创建占位符，但遗憾的是，该属性不适用于选择框。

为选择框创建占位符

我们可以使用 option 标签在选择列表中定义选项。option 标签的 value 属性可用于此目的。此处，我们将 技术列表 设置为占位符文本 -

<option value="">技术列表</option>

示例

现在让我们看完整的示例 -


<!DOCTYPE html>
<html>
<head>
   <style>
      select {
         appearance: none;
         background: yellow;
         width: 100%;
         height: 100%;
         color: black;
         cursor: pointer;
         border: 2px dashed orange;
         border-radius: 4px;
      }
      .select {
         position: relative;
         display: block;
         width: 10em;
         height: 3em;
         line-height: 3;
         overflow: hidden;
         border-radius: .25em;
         padding-bottom: 10px;
      }
   </style>
</head>
<body>
   <h1>Programming Courses</h1>
   <p>We have covered the following programming technologies:</p>
   <div class="select">
      <select name="st" id="st">
         <option value="">List of Technologies</option>
         <option value="1">Python</option>
         <option value="2">Java</option>
         <option value="3">C</option>
         <option value="4">C++</option>
         <option value="5">Ruby</option>
         <option value="6">Kotlin</option>
         <option value="7">GO</option>
         <option value="8">C#</option>
      </select>
   </div>
</body>
</html>

输出

创建用于选择的占位符并禁用它

由于占位符不会被用户选择，并且仅用于显示文本，因此我们需要禁用它。我们将使用 <option> 标签的 disabled 属性来禁用它。此属性禁用该选项 -

<option value="" disabled selected>选择任何技术</option>

示例

现在让我们看一个例子 -


<!DOCTYPE html>
<html>
<head>
   <style>
      select {
         appearance: none;
         background: yellow;
         width: 100%;
         height: 100%;
         color: black;
         cursor: pointer;
         border: 2px dashed orange;
         border-radius: 4px;
      }
      .select {
         position: relative;
         display: block;
         width: 10em;
         height: 3em;
         line-height: 3;
         overflow: hidden;
         border-radius: .25em;
         padding-bottom: 10px;
      }
   </style>
</head>
<body>
   <h1>Programming Courses</h1>
   <p>We have covered the following programming technologies:</p>
   <div class="select">
      <select name="st" id="st">
         <option value="" disabled selected>Select any Technology</option>
         <option value="1">Python</option>
         <option value="2">Java</option>
         <option value="3">C</option>
         <option value="4">C++</option>
         <option value="5">Ruby</option>
         <option value="6">Kotlin</option>
         <option value="7">GO</option>
         <option value="8">C#</option>
      </select>
   </div>
</body>
</html>