¿Cómo puedo hacer que el elemento "seleccionar" se abra y muestre sus elementos de opción cuando hago clic dentro del elemento "div"? En otras palabras, quiero activar el elemento "seleccionar" cuando hago clic en la zona verde.
<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; } } } }No recomendaría hacer tal cosa, pero aquí tienes:
$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; } } } }