【问题标题】:Add arrows to dropdown menu CF7向下拉菜单 CF7 添加箭头
【发布时间】:2021-01-05 08:57:40
【问题描述】:

我在客户的网站上使用 Contact Form 7,并将下拉菜单设置为:

.wpcf7-form select {
    -webkit-appearance: textfield;
color: #72858a;
font-size: 0.7777777778rem;
background-color: #e9edf0;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
}

不幸的是,箭头现在不见了。无论如何要在下拉菜单的右侧添加一个与文本颜色相同的向下箭头?我尝试了在这个网站上找到的不同 css 类,但似乎没有任何效果。

它现在的显示方式:

应该如何:

箭头也可以是另一个箭头。

任何帮助将不胜感激!

问候, 瓦斯科

【问题讨论】:

    标签: css wordpress drop-down-menu contact-form-7


    【解决方案1】:

    这是给你的一个选项...现在...我使用了 span.wpcf7-form-control-wrap ,它专门围绕我正在设计的选择。您也可以(改为)将选择包装在自定义 div 中。

    这为我产生了这个结果

    我还使用剪辑路径制作了三角形,因此您可以更改颜色或其他任何内容。

    /* Using the menu-813 which for me was the span around the select.*/
    span.wpcf7-form-control-wrap.menu-813 {
        position: relative;
        height: 60px;
        background: #e9edf0;
        display: inline-block;
    }
    span.wpcf7-form-control-wrap.menu-813:after {
        content: '';
        position:absolute;
        width: 15px;
        height: 15px;
        background: #000;
        right:8px;
        top: 20px;
        z-index: 0;
        clip-path: polygon(100% 0, 0 0, 50% 100%);
    }
    
    .wpcf7-form select {
        -webkit-appearance: none;
        appearance: none;
        color: #72858a;
        font-size: 0.7777777778rem;
        background-color: transparent;
        border-color: #e9edf0;
        padding-top: 5px;
        padding-bottom: 5px;
        width: 300px;
        z-index: 1;
        position: relative;
        padding-left: 2ch;
    }
    

    【讨论】:

    • 感谢您的输入,但不幸的是它在我的最后不起作用。多边形不显示。想不通为什么。 CSS 的其余部分工作得很好。有什么想法吗?