Search code examples
htmlcssdropdown

Add Arrow down into Flag Dropdown menu

i want to add arrow down into dropdown menu?

My current code in link:

https://jsfiddle.net/bvotcode/qe6L3bxr/1/

My CSS:

.flagdropdown { position: relative; cursor: pointer; border: 0.5px solid gray; width: 110px; position: absolute; content: "▼"; left: 50%; top: 10%; transform: translate(-50%, 50%);}
.flagdropdown-options { position: absolute; width: 100%; z-index: 10; background: #fff; }
.flagdropdown-option { padding: 5px; }
.flagdropdown-option:hover { background-color: #f0f0f0; }
.flagdropdown-position-1 {object-position: 5px; top: 55%; border-radius: 0.25rem;}

Thank you enter image description here

Solution

  • For this, you should use CSS-pseudo elements like before or after. Moreover, use pointer-events: none on the pseudo-element so that it does effect the clicking function.

    Look at this example:

    .flagdropdown::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 5px;
  width: 0px;
  height: 0px;
  border-top: 5px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  pointer-events: none;
}

    Note: the borders are just to create the triangle shape of the arrow icon

    Output:

    enter image description here

    Working jsfiddle: https://jsfiddle.net/py2wdt1L/6/