下拉菜单triangel /箭头？ [英] drop down menu with triangel / arrow?

问题描述

搜索下拉式导航帮助！

它应该看起来像这样：
我应该看起来像这样

但看起来像：
但看起来像这样 解决方案

我给你一个我的实现的例子，但是当然你必须添加你自己的svg（或其他格式）背景图片，这将是你需要的箭头，当然箭头的位置也会还需要更改：

  .myClass {
 background：url（yourPic.png）; 
背景位置：100％50％; 
背景重复：不重复; 
背景颜色：白色; 
 border-color：white; 
颜色：黑色; 
 padding：5px 20px 5px 10px; 
 -moz-appearance：none; 
 -webkit-appearance：none; 
} 
  

这里的主要技巧是外观属性，它会隐藏select元素的默认样式，所以可以用你自己的样式覆盖。

PS。要在IE中完成这项工作，您必须添加以下内容：

  .myClass ::  -  ms-expand {
显示：无; 
} 
  

Search help for a drop down navigation!

It should looks like this: I should look like this

But looks like: But looks like this

解决方案

I give you an example of my implementation, but of course you will have to add your own svg(or other format) background picture which will be the arrow you need, and of course position of the arrow will also need changes:

.myClass {
  background: url("yourPic.png");
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-color: white;
  border-color: white;
  color: black;
  padding: 5px 20px 5px 10px;
  -moz-appearance: none;
  -webkit-appearance: none;
}

Main trick here is appearance property which will hide default styling of select element so it can be overridden with your own styles.

PS. To make this work in IE you will have to add this:

.myClass::-ms-expand {
  display:none;
}

这篇关于下拉菜单triangel /箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！