html - 使用 css 设置 div 样式，使其看起来与默认的 html 选择表单完全一样

Question

有没有一种方法可以使用 css 设置 div 的样式，使其看起来与其原生的 html 选择表单完全一样？ .就像这些照片一样。没有悬停 悬停 . 问题是我正在用 javascript 制作多级下拉菜单，我希望它看起来像标准的 html 选择。我唯一无法弄清楚的部分是悬停时带有蓝色渐变的箭头。我无法正确定位它。

这是我的div结构

<div class="multilevel-dropdown-display"><span class="multilevel-dropdown-value"></span> <span class="multilevel-dropdown-arrow"></span></div>

我知道我必须使用绝对定位来定位箭头，但是如果我在 hower 上添加另一张图片(我知道我应该使用背景渐变来做到这一点)，它就会超出该区域。

这是箭头的CSS样式

.multilevel-dropdown-arrow {

    background-image: url("icon.png");
    width:16px; 
    height:18px;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    background-repeat:no-repeat;


}

也许我做错了，有一个更简单的解决方案。我希望它看起来真的和选择表单一模一样。 谢谢你的帮助

Answer 1

您需要使用填充将箭头包围在另一个 div 中。因此，HTML 结构将如下所示:

<div class="multilevel-dropdown-display"><span class="multilevel-dropdown-value"></span> <div class="multilevel-dropdown-arrow-box"><span class="multilevel-dropdown-arrow"></span></div></div>

应用填充和悬停效果后，CSS 看起来像 -

.multilevel-dropdown-arrow-box {border:1px solid transparent;padding-top , padding-bottom: 5px;padding-left , padding-right:3px;}
.multilevel-dropdown-display:hover .multilevel-dropdown-arrow-box {background: linear-gradient(to bottom, rgba(0,0,255,0), rgba(0,0,255,0.8));border:1px solid blue;}

请注意，您必须根据需要重新定位 multilevel-dropdown-arrow-box。