選擇菜單中的字體很棒
[英]Font awesome in select menu
問題描述
我想在我的選擇菜單中添加圖標。 在Stack Overflow頁面之一中，我發現我可以使用Font Awesome並將圖標作為文本插入。 我在頭部包含了腳本。 當我嘗試在選擇菜單中使用圖標時，它無法正常工作。 但它完美地在選擇菜單之外工作。 是否可以在選擇菜單選項中插入圖標，或者根本不可能這樣做？ 我該怎么做？
有一個鏈接到字體真棒頁面： https ： //fontawesome.com/cheatsheet/free/solid
有一個我試過的片段
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://kit.fontawesome.com/9593bd7a92.js"></script> </head> <body> <i class="fas fa-truck">Truck</i> <br><br><br> <select> <option><i class="fas fa-truck">Truck</i></option> </select> </body> </html>
2 個解決方案
解決方案1
3 2019-08-30 17:03:40
這是HTML的限制。 select和option元素是HTML原生的，無法在其中顯示HTML。
您需要使用HTML，CSS + JavaScript模擬選擇元素，然后將值映射到隱藏的input元素（如果您將其用作表單的一部分）。
<ul class="select">
<li class="option"><i class="fas fa-truck">Truck</i></li>
<li class="option"><i class="fas fa-star">Star</i></li>
<li class="option"><i class="fas fa-user">User</i></li>
</ul>
這有助於深入了解下拉列表的交互方面（因此它不僅僅顯示為列表）： https ： //www.w3schools.com/howto/howto_js_dropdown.asp
解決方案2
3 已采納 2019-08-30 17:06:03
這是我的解決方案
默認情況下， i會從HTML中的選項中刪除標簽
使用以下方法添加圖標
<option> Truck</option>
另外添加以下CSS
select,option {
font-family: 'Arial', 'Font Awesome 5 Pro';
font-weight: 900;
}
將“Arial”字體替換為您的網站字體名稱。
將中間代碼替換為您選擇的圖標代碼
'＆＃x'+ 'f0d1' （fontawsome卡車圖標代碼）+;
右鍵單擊圖標並檢查圖標的i標簽的before偽元素，即可找到圖標代碼。
select,option { font-family: 'Arial', 'Font Awesome 5 Pro'; font-weight: 900; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://kit.fontawesome.com/9593bd7a92.js"></script> </head> <body> <i class="fas fa-truck">Truck</i> <br><br><br> <select> <option> Truck</option> <option> Truck</option> <option> Truck</option> <option> Truck</option> </select> </body> </html>
更新的答案
由於上述答案不適用於手機，因此您必須實施自定義選擇
以下是來自w3schools的代碼如何創建自定義選擇
我修改了代碼以添加對圖標的支持。
var x, i, j, selElmnt, a, b, c; function generateInnerDiv(index) { nametag = document.createElement("span"); nametag.textContent = selElmnt.options[index].textContent; icon = document.createElement("i"); icon.setAttribute("class", selElmnt.options[index].getAttribute('data-icon')); return [icon, nametag] } /*look for any elements with the class "custom-select":*/ x = document.getElementsByClassName("custom-select"); for (i = 0; i < x.length; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; /*for each element, create a new DIV that will act as the selected item:*/ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); innerDiv = generateInnerDiv(selElmnt.selectedIndex) a.appendChild(innerDiv[0]); a.appendChild(innerDiv[1]); //a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /*for each element, create a new DIV that will contain the option list:*/ b = document.createElement("DIV"); //items holder b.setAttribute("class", "select-items select-hide"); for (j = 1; j < selElmnt.length; j++) { /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); innerDiv = generateInnerDiv(j); c.appendChild(innerDiv[0]); c.appendChild(innerDiv[1]); //c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { /*when an item is clicked, update the original select box, and the selected item:*/ var y, i, k, s, h, l, m; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; h = this.parentNode.previousSibling; l = this.getElementsByTagName("span")[0]; m = this.getElementsByTagName("i")[0]; for (i = 0; i < s.length; i++) { if (s.options[i].innerHTML == l.innerHTML) { s.selectedIndex = i; h.getElementsByTagName("span")[0].innerHTML = l.innerHTML; h.getElementsByTagName("i")[0].setAttribute("class", s.options[i].getAttribute('data-icon')); y = this.parentNode.getElementsByClassName("same-as-selected"); for (k = 0; k < y.length; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[i].appendChild(b); a.addEventListener("click", function(e) { /*when the select box is clicked, close any other select boxes, and open/close the current select box:*/ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /*a function that will close all select boxes in the document, except the current select box:*/ var x, y, i, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); for (i = 0; i < y.length; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < x.length; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect); ////////////////// //How to get values from custom select ////////////////// document.getElementById("btn1").addEventListener("click", () => { console.log(document.getElementById("myselect1").value) }); document.getElementById("btn2").addEventListener("click", () => { console.log(document.getElementById("myselect2").value) });
.custom-select { position: relative; font-family: Arial; } .custom-select select { display: none; /*hide original SELECT element:*/ } .custom-select i { margin-right: 10px; } .select-selected { background-color: DodgerBlue; } /*style the arrow inside the select element:*/ .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /*point the arrow upwards when the select box is open (active):*/ .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /*style the items (options), including the selected item:*/ .select-items div, .select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; user-select: none; } /*style items (options):*/ .select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /*hide the items when the select box is closed:*/ .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); }
<script src="https://kit.fontawesome.com/9593bd7a92.js"></script> <h2>Custom Select</h2> <!--surround the select box with a "custom-select" DIV element. Remember to set the width:--> <div class="custom-select" style="width:200px;"> <select id="myselect1"> <option data-icon="fas fa-truck" value="0">Select car:</option> <option data-icon="fas fa-adjust" value="Audi">Audi</option> <option data-icon="fas fa-truck" value="BMW">BMW</option> <option data-icon="fas fa-arrow-up" value="Citroen">Citroen</option> <option data-icon="fas fa-asterisk" value="Ford">Ford</option> <option data-icon="fas fa-arrow-left" value="Honda">Honda</option> <option data-icon="fas fa-arrow-down" value="Jaguar">Jaguar</option> </select> </div> <br /> <div class="custom-select" style="width:200px;"> <select id="myselect2"> <option data-icon="fas fa-truck" value="0">Select car:</option> <option data-icon="fas fa-adjust" value="Audi">Audi</option> <option data-icon="fas fa-truck" value="BMW">BMW</option> <option data-icon="fas fa-arrow-up" value="Citroen">Citroen</option> <option data-icon="fas fa-asterisk" value="Ford">Ford</option> <option data-icon="fas fa-arrow-left" value="Honda">Honda</option> <option data-icon="fas fa-arrow-down" value="Jaguar">Jaguar</option> </select> </div> <br /> <h3>For testing Purpose<h3> <button id="btn1"> Console log Select 1 value </button> <button id="btn2"> Console log Select 2 value </button>
選擇菜單更改時，使字體真棒圖標更改顏色。
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.