How to trigger select element manually?

Question

How can I get the "select" element to open and show its option elements when I click inside "div" element? In other words, I want to trigger the "select" element when I click to green zone.

HTML

<div>
  <h3>Cities</h3>
  <select>
    <option>Berlin</option>
    <option>Paris</option>
    <option>London</option>
  </select>
</div>

SCSS

body{
  background-color: lightgray;
  margin: 100px;
  
    div{
    display: inline-block;
    padding: 50px;
    background-color: green;

    select{
      width:300px;

      &:focus{
        outline: none;
      }
    }
  }
}

https://codepen.io/mehmetguduk/pen/vYWVGPK

Answer 1

I would not recommend doing such thing but here you go:

$select-width: 400px;
$top-spacing: 100px;
$bottom-spacing: 50px;
$left-spacing: 30px;

body {
    background-color: lightgray;
    margin: 100px;

    div {
        display: inline-block;
        background-color: green;
        position: relative;
        padding: $top-spacing 0 $bottom-spacing;

        h3 {
            left: $left-spacing;
            position: absolute;
            top: 40px;
        }

        select {
            border-top: $top-spacing solid green;
            border-bottom: $top-spacing solid green;
            border-left: $left-spacing solid green;
            border-right: $left-spacing solid green;
            margin: -$top-spacing 0 (-$bottom-spacing);
            cursor: pointer;
            width: $select-width;

            &:focus {
                outline: none;
                border-top: $top-spacing solid green;
                // border has to stay 0 in order to keep options still
                border-width: 0px;
                width: $select-width - (2 * $left-spacing);
                margin: -$top-spacing $left-spacing $bottom-spacing;
            }
        }
    }
}

https://codepen.io/Gotzi/pen/LYejZJq