如何為“select”框製作佔位符？

在 HTML 中，placeholder 屬性用於建立佔位符，但遺憾的是，它不適用於 select 框。

為 select 建立佔位符

我們可以使用 option 標籤來定義 select 列表中的選項。option 標籤的 value 屬性用於此目的。這裡我們將 Technology 列表 設定為佔位符文字 −

<option value="">List of Technologies</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>

輸出

為 select 建立佔位符並停用它

由於使用者不會選擇佔位符，它只用於顯示文字，我們需要停用它。我們將使用 <option> 標籤的 disabled 屬性來停用它。此屬性會停用該選項 −

<option value="" disabled selected>Select any Technology</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>

輸出

更新於: 01-Nov-2022

4K+ 瀏覽量

開啟您的 職業生涯

透過完成教程獲得認證

入門
廣告