要設(shè)計(jì)本機(jī)下拉菜單，請(qǐng)使用CSS屬性，例如填充，邊框 - 拉迪烏斯（Border-Radius）和外觀：無(wú)需刪除默認(rèn)樣式，同時(shí)通過背景圖像添加自定義箭頭并確保可訪問性和跨瀏覽器兼容性。 2。要進(jìn)行全面控制，請(qǐng)使用按鈕和位置列表使用HTML，CSS和JavaScript創(chuàng)建自定義下拉列表，其中JavaScript處理可切換可見性，更新選擇并關(guān)閉外部點(diǎn)擊，同時(shí)還可以實(shí)現(xiàn)鍵盤導(dǎo)航和ARIA角色，以供訪問性。 3?；蛘撸褂肅SS框架（例如Tailwind或Bootstrap）提供預(yù)先響應(yīng)的下拉組件，可以通過最小的代碼輕松自定義和增強(qiáng)。在實(shí)現(xiàn)這兩種方法時(shí)，始終優(yōu)先考慮可用性，移動(dòng)友好性和可訪問性。

造型下拉菜單可以使您的網(wǎng)站看起來(lái)更加精致并改善用戶體驗(yàn)。無(wú)論您是使用簡(jiǎn)單的<select></select>元素還是自定義下拉列表，都可以使用HTML和CSS有效地進(jìn)行操作。

1。樣式一個(gè)本機(jī)<select></select>下拉

默認(rèn)情況下，本機(jī)下拉（ <select></select> ）是可訪問且功能功能的，但可以看到過時(shí)。您可以使用CSS對(duì)其進(jìn)行樣式，盡管跨瀏覽器的一致性很棘手。

 <select class =“自定義選擇”>
  <option value =“ option1”>選項(xiàng)1 </option>
  <option value =“ option2”>選項(xiàng)2 </option>
  <option value =“ option3”>選項(xiàng)3 </option>
</select>

 .custom-select {
  填充：10px;
  字體大小：16px;
  邊界：1PX實(shí)心#CCC;
  邊界拉迪烏斯：6px;
  背景色：白色；
  寬度：200px;
  外觀：無(wú)； / *刪除默認(rèn)樣式 */
  -webkit-apperance：無(wú)；
  -moz-graberance：無(wú)；
  背景圖像：URL（&#39;數(shù)據(jù)：Image/SVG XML; UTF8，<svg Fill =“ Black” XMlns =“ http://www.w.org/2000/svg” ViewBox =“ 0 10 6”> <PATH D =“ M1 1L4 4 4-4 4-4 4-4“/> </svg>”）;
  背景重復(fù)：無(wú)重復(fù)；
  背景位置：右10PX中心；
  背景大?。?2px;
  光標(biāo)：指針；
}

關(guān)鍵提示：

• 使用appearance: none刪除默認(rèn)箭頭（但請(qǐng)記住通過背景圖像添加自定義的箭頭）。
• 始終在多個(gè)瀏覽器中測(cè)試 - Safari和Firefox仍可能顯示默認(rèn)樣式。
• 保持可訪問性：確保焦點(diǎn)狀態(tài)和鍵盤導(dǎo)航仍然有效。

2。使用HTML/CSS/JS創(chuàng)建一個(gè)完全自定義的下拉列表

有關(guān)更多控制，請(qǐng)使用div ， button和ul構(gòu)建自定義下拉列表。

 <div class =“下拉”>
  <button class =“下拉訪問”>選擇一個(gè)選項(xiàng)▼</button>
  <ul class =“下拉菜單”>
    <li class =“下拉列表”>選項(xiàng)1 </li>
    <li class =“下拉列表”>選項(xiàng)2 </li>
    <li class =“下拉列表”>選項(xiàng)3 </li>
  </ul>
</div>

 .dropdown {
  位置：相對(duì)；
  顯示：內(nèi)聯(lián)塊；
  寬度：200px;
}

.dropdown-toggle {
  寬度：100％；
  填充：10px;
  文本平衡：左；
  背景：白色；
  邊界：1px實(shí)心#DDD;
  邊界拉迪烏斯：6px;
  光標(biāo)：指針；
  字體大小：16px;
}

。下拉式菜單 {
  位置：絕對(duì)；
  頂部：100％；
  左：0;
  右：0;
  背景：白色；
  邊界：1px實(shí)心#DDD;
  邊界拉迪烏斯：6px;
  列表風(fēng)格：無(wú)；
  保證金：0;
  填充：0;
  盒子陰影：0 4PX 6PX RGBA（0,0,0,0.1）;
  Max-Height：200px;
  溢出Y：自動(dòng)；
  不透明度：0;
  可見性：隱藏；
  過渡：不透明度0.2s易于；
  z索引：1000;
}

.dropdown-item {
  填充：10px;
  光標(biāo)：指針；
}

.dropdown-item：懸停{
  背景色：＃f4f4f4;
}

.dropdown.Active .Dropdown-menu {
  不透明度：1;
  可見性：可見；
}

 const下拉= document.queryselector（'。下拉'）;
const toggle = document.queryselector（'。下拉toggle'）;
const項(xiàng)目= document.queryselectorall（'。下拉字節(jié)'）;

toggle.addeventlistener（'click'，（）=> {
  dropdown.classlist.toggle（'active'）;
}）;

//可選：?jiǎn)螕羰彝鈺r(shí)關(guān)閉下拉
document.addeventlistener（'click'，（e）=> {
  if（！dropdown.contains（e.target））{
    dropdown.classlist.remove（'active'）;
  }
}）;

//單擊項(xiàng)目時(shí)更新按鈕文本
items.foreach（item => {
  item.AddeventListener（'click'，（）=> {
    toggle.textContent = item.TextContent;
    dropdown.classlist.remove（'active'）;
  }）;
}）;

優(yōu)點(diǎn)：

• 完整的設(shè)計(jì)控制（顏色，字體，動(dòng)畫，圖標(biāo)）。
• 可以包括圖像，分隔線或搜索輸入。
• 跨瀏覽器始終如一地工作。

可訪問性注釋：

• 為屏幕讀取器添加role="listbox" ， role="option" 。
• 使用鍵盤事件（ ArrowDown ， Enter ， Escape ）進(jìn)行導(dǎo)航。
• 正確管理焦點(diǎn)。

3。使用CSS框架（可選）

如果您使用的是Bootstrap ， Tailwind CSS或Material UI等庫(kù)，則它們提供了預(yù)定的下拉列表。

帶有風(fēng)風(fēng)的例子：

 <div class =“相對(duì)內(nèi)線塊”>
  <button class =“ bg-white邊界邊界灰色-300圓形LG PX-4 PY-2 W-48文本左”>
    選擇選項(xiàng)
  </button>
  <ul class =“絕對(duì)MT-1 W-48 BG-White邊界邊界灰色-300圓形LG Shadow-LG Z-10隱藏”>
    在
    在
  </ul>
</div>

然后添加JavaScript以切換可見性。

最終提示

• 保持簡(jiǎn)單：不要過度風(fēng)格 - 清晰度不僅僅是閃光。
• 移動(dòng)友好型：確保點(diǎn)擊目標(biāo)足夠大（至少44％）。
• 測(cè)試可訪問性：使用屏幕讀取器和僅鍵盤導(dǎo)航。
• 避免禁用本地行為，除非您正確替換它。

基本上，您可以輕輕造型本機(jī)<select></select>或構(gòu)建自定義的 - 后者具有更大的靈活性，但需要更多的護(hù)理。

以上是如何樣式a 下拉？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！