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.
<div>
<h3>Cities</h3>
<select>
<option>Berlin</option>
<option>Paris</option>
<option>London</option>
</select>
</div>
body{
background-color: lightgray;
margin: 100px;
div{
display: inline-block;
padding: 50px;
background-color: green;
select{
width:300px;
&:focus{
outline: none;
}
}
}
}
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;
}
}
}
}