Как увеличить область клика для взаимодействия input`a

Question

Есть элемент input:

.bar {
  border: 1px solid #dcdcdc;
  border-radius: 100px;
  width: 40%;
  height: 50px;
  position: fixed;
  top: 45%;
  left: 30%;
  display: flex;
  justify-content: flex-start;
    
}

input {
  border: hidden;
  width: 85%;
  height: 48px;
  font-size: 20px;
  outline: none;
  margin-left: 50px;
}

<body>
    
    </div>
    <div class="bar">
       
        <input type="text" style="border:none;">

            
    </div>
    
</body>

Но кликнуть на него я могу только с половины поля. Как это исправить?

Answer 1

Замени div на label.
Всё равно это плохая идея, потому что клик правой кнопкой будет отличаться.

.bar {
  border: 1px solid #dcdcdc;
  border-radius: 100px;
  width: 40%;
  height: 50px;
  position: fixed;
  top: 45%;
  left: 30%;
  display: flex;
  justify-content: flex-start;
}

input {
  border: hidden;
  width: 85%;
  height: 48px;
  font-size: 20px;
  outline: none;
  margin-left: 50px;
}

<label class="bar">
  <input type="text" style="border:none;">
</label>

Answer 2

Лучше сделать так:

input {
  width: 40%;
  height: 50px;
  border: 1px solid #dcdcdc;
  border-radius: 25px;
  outline: none;
  font-size: 20px;
  padding: 0 25px 0 50px;
  
  display: block;
  margin: calc(50vh - 25px) auto 0;
}

<input type="text">

БЛОГ НА HUSL

Как увеличить область клика для взаимодействия input`a

Ответы (2 шт):