1

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?

Here is the input: input

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)

D. Pardal
  • 6,173
  • 1
  • 17
  • 37
NicolasSC
  • 368
  • 2
  • 19
  • There is no way to do this. See https://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due – D. Pardal Jul 30 '20 at 15:51
  • I get this, but isn't there a way to make the select bigger (only the "hitbox"), but keep it as visually small as it is. So it looks like it only takes the space it takes actually, but in fact it covers all the div? I know it was impossible to do it with even, I mentionned it at the end of my post. – NicolasSC Jul 30 '20 at 16:00
  • No, you can't change the "hitbox" of elements. `.click()` doesn't wok either. You'll need a custom ` – D. Pardal Jul 30 '20 at 16:01
  • Ok, thanks! I will try to do that... – NicolasSC Jul 30 '20 at 16:03

0 Answers0