如何在 css 中做可點擊的自定義下拉箭頭？

Question

我使用 css 設置了自定義下拉箭頭，但它是不可點擊的。 那么我該如何解決呢？

 .container select{ border-radius: 20px; padding: 5px 38px 7px 23px; border: 2px solid orange; appearance: none; position: relative; }.container i.fa-angle-down{ position: absolute; right: 66.8%; top: 92.8%; border-radius: 20px; color: white; background-color: orange; padding: 8px; padding-left: 10px; font-size: 20px; }

 <div class="container"> <h6>Current open positions</h6> <div class="form-group"> <label class="search">Search by Location</label> <select> <option>Canada</option> <option>Dakor</option> </select><i class="fas fa-angle-down"></i> </div> </div>

Answer 1

它不起作用，因為您將字體插入 select 之外，這將其排除在 select 選項之外。 您可以使用 select 偽元素來實現相同的目的。 你可以在字體真棒文檔中找到更多關於它的信息。 它能回答你的問題嗎

Answer 2

有更簡潔的方法可以實現您想要實現的目標。 查找Select2 。

盡管如此，您的下拉菜單不可點擊的原因是因為它與實際下拉菜單重疊 - 為了規避這一點，請添加此屬性；

pointer-events: none; 到您的.container i.fa-angle-down class。

IE;

.container i.fa-angle-down{
    position: absolute;
    right: 66.8%;
    top: 92.8%;
    border-radius: 20px;
    color: white;
    background-color: orange;
    padding: 8px;
    padding-left: 10px;
    font-size: 20px;
    pointer-events: none; //enables click-through
}

這將啟用對其背后的對象/元素的“點擊”。

另一種選擇是我在這里為您找到的這個解決方案，可以在此處找到示例。

Answer 3

答：：如何在 css 中創建自定義下拉箭頭？ 這是鏈接，（我的 CodePen）：點擊這里

 select { /* styling */ background-color: white; border: thin solid blue; border-radius: 4px; display: inline-block; font: inherit; line-height: 1.5em; padding: 0.5em 3.5em 0.5em 1em; /* reset */ margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; } /* arrows */ select.classic { background-image: linear-gradient(45deg, transparent 50%, blue 50%), linear-gradient(135deg, blue 50%, transparent 50%), linear-gradient(to right, skyblue, skyblue); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat; } select.classic:focus { background-image: linear-gradient(45deg, white 50%, transparent 50%), linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray); background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat; border-color: grey; outline: 0; } select.round { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), radial-gradient(#ddd 70%, transparent 72%); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% -.5em).5em; background-size: 5px 5px, 5px 5px, 1.5em 1.5em; background-repeat: no-repeat; } select.round:focus { background-image: linear-gradient(45deg, white 50%, transparent 50%), linear-gradient(135deg, transparent 50%, white 50%), radial-gradient(gray 70%, transparent 72%); background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% -.5em).5em; background-size: 5px 5px, 5px 5px, 1.5em 1.5em; background-repeat: no-repeat; border-color: green; outline: 0; } select.minimal { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; } select.minimal:focus { background-image: linear-gradient(45deg, green 50%, transparent 50%), linear-gradient(135deg, transparent 50%, green 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; border-color: green; outline: 0; } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } body { background-color: rgb(0,159,214); font: bold 1em/100% "Helvetica Neue", Arial, sans-serif; padding: 2em 0; text-align: center; } h1 { color: white; line-height: 120%; margin: 0 auto 2rem auto; max-width: 30rem; }

 <h1>Tutorial How to create a custom dropdown arrow in css.</h1> <select class="classic"> <s>CSS SELECT arrow (classic)</s> <option>No external background image</option> <option>No wrapper</option> </select> <br><br> <select class="round"> <option>CSS SELECT arrow (round)</option> <option>No external background image</option> <option>No wrapper</option> </select> <br><br> <select class="minimal"> <option>CSS SELECT arrow (minimal)</option> <option>No external background image</option> <option>No wrapper</option> </select>

留下一個贊，評論。

Answer 4

為什么不使用 SVG 而不是額外的圖標？

 .container select{ border-radius: 20px; padding: 5px 38px 7px 23px; border: 2px solid orange; background-color: Transparent; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 512'><path d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z' style='fill: rgb(255, 193, 42);'></path></svg>") no-repeat right center; appearance: none; -moz-appearance: none; -webkit-appearance: none; }

 <div class="container"> <h6>Current open positions</h6> <div class="form-group"> <label class="search">Search by Location</label> <select> <option>Canada</option> <option>Dakor</option> </select> </div> </div>