I have a div that contains the label for my element and the input. For now, when you click on the input, a dropdown menu appears. However, they want me to be able to click anywhere on the div and open the dropdown menu. It seems pretty much impossible, but maybe you can help me make it possible?
I want to be able to click anywhere: blank space, title, etc. and open the dropdown menu.
.lone - input - container {
margin - top: 0.75 rem;
margin - bottom: 0.75 rem;
display: inline - block;
position: relative;
width: 100 % ;
border - width: 1 px;
--border - opacity: 1;
border - color: #BAC9D9;
border - color: rgba(186, 201, 217,
var (--border - opacity));
border - radius: 0.5 rem;
padding: 0.75 rem;
padding - top: 0.5 rem;
padding - bottom: 0.5 rem;
padding - top: 0;
}
.lone - input - container - title {
font - size: 10 px;
--text - opacity: 1;
color: #788EA4;
color: rgba(120, 142, 164, var(--text-opacity));
}
.select-input {
font-size: 16px;
width: 100%;
}
<div class="lone-input-container">
<label for="province" class="lone-input-container-title">Dans quelle province habitez-vous?</label>
<div>
<select name="province" class="select-input bg-transparent">
<option value=""></option>
<option value="ab">Alberta</option>
<option value="bc">Colombie-Britannique</option>
<option value="mb">Manitoba</option>
<option value="nb">Nouveau-Brunswick</option>
<option value="nl">Terre-Neuve-et-Labrador</option>
<option value="nt">Territoires du Nord-Ouest</option>
<option value="ns">Nouvelle-Écosse</option>
<option value="nu">Nunavut</option>
<option value="on">Ontario</option>
<option value="pe">Île-du-Prince-Édouard</option>
<option value="qc">Québec</option>
<option value="sk">Saskatchewan</option>
<option value="yt">Yukon</option>
</select>
</div>
</div>
I already tried to make an event click on the div that would focus the select element, but it seems to be impossible. (according to other Stack Overflow posts)