簡體   English   中英

將可點擊箭頭添加到下拉選擇

[英]Adding clickable arrow to dropdown select

我添加了選擇標簽,但無法正確對齊選擇區域內的箭頭。它在選擇區域外對齊。 也無法單擊箭頭。

我應用的 CSS 中有任何錯誤。

 .custom-selection select { border:none; background-color:white; color: blue; padding: 10px; width: 100%; border-radius: 10px; font-size: 20px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26); margin: 0; -webkit-appearance: none; -moz-appearance: none; } .custom-selection option{ border-radius: 18px; } .custom-selection::before { position: absolute; top: 0; right: 0; width: 20%; height: 100%; text-align: center; font-size: 28px; color:blue; background-color: rgba(255, 255, 255, 0.1); pointer-events: none; } .custom-selection:hover::before { color:white; background-color: rgba(255, 255, 255, 0.2); } .custom-selection::after { content: "\\25bc"; position: absolute; top: 0; right: 10; }
 <div class="custom-selection"> <select class="round" id="myselect"> </select> </div>

右、左、上或下需要用一個單位來指定……Css 無法為你決定:

問題出在課堂上: .custom-selection::after 這比基本問題更復雜,請查看評論以獲取所有問題。

演示:

 $("#myselect").on("click", function() { if($('.custom-selection.rotate').length > 0){ $('.custom-selection').removeClass('rotate'); } else{ $('.custom-selection').addClass('rotate'); } });
 body{ background-color:red; } .custom-selection{ position:relative; background-color:white; border-radius: 10px; } .custom-selection select { border:none; color: blue; padding: 10px; width: 100%; border-radius: 10px; font-size: 20px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26); margin: 0; -webkit-appearance: none; -moz-appearance: none; position:relative; z-index:2; background-color: transparent; } .custom-selection option{ border-radius: 18px; } .custom-selection::before { position: absolute; top: 0; right: 0; width: 20%; height: 100%; text-align: center; font-size: 28px; color:blue; background-color: rgba(255, 255, 255, 0.1); pointer-events: none; display:block; z-index:1; } .custom-selection:hover::before { color:white; background-color: rgba(255, 255, 255, 0.2); } .custom-selection::after { content: "\\25bc"; position: absolute; top: calc(50% - 9px); right: 15px; background-color:white; } .custom-selection.rotate::after { transform: rotate(180deg); }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="custom-selection"> <select class="round" id="myselect"> <option>test</option> <option>test2</option> </select> </div>

我做過, position: absolute; float:right position: absolute; float:right將內容設置在右側, margin-left: -1.5em相對移動, margin-top: 0.75em與稍微向下移動相同。

如果我們使用 px,那么它在手機或平板電腦上的輸出可能會有所不同,但這里我使用的是 em 而不是 px。 em 和 rem 主要用於更改字體大小。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .custom-selection select { border:none; background-color:white; color: blue; padding: 10px; width: 100%; border-radius: 10px; font-size: 20px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26); margin: 0; -webkit-appearance: none; -moz-appearance: none; } .custom-selection option{ border-radius: 18px; } .custom-selection::before { position: absolute; top: 0; right: 0; width: 20%; height: 100%; text-align: center; font-size: 28px; color:blue; background-color: rgba(255, 255, 255, 0.1); pointer-events: none; } .custom-selection:hover::before { color:white; background-color: rgba(255, 255, 255, 0.2); } .custom-selection::after { content: "\\25bc"; /* changes required it works with any view port*/ position: absolute; float: right; margin-left: -1.5em; margin-top: 0.75em; /* end */ } </style> </head> <body> <div class="custom-selection"> <select class="round" id="myselect"> <option value="Rajkot">Rajkot</option> <option value="Ahmedabad">Ahmedabad</option> <option value="Surat">Surat</option> </select> </div> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM