将可点击箭头添加到下拉选择
[英]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>
2 个解决方案
解决方案1
2 已采纳 2020-09-10 12:12:43
右、左、上或下需要用一个单位来指定……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>
解决方案2
1 2020-09-10 12:36:05
我做过， 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.