Общий фокус для "группы ввода" bootstrap 4

Question

Создаю группу ввода согласно документации bootstrap 4. По-умолчанию, при выборе элемента ввода, фокусная рамка отрисовывается только вокруг текстового поля.

<div class="d-flex flex-row form-group">
  <div class="col-5 pr-3 text-right">
    <small><label for="inputTel" class="col-form-label">Телефон:</label></small>
  </div>
  <div class="col-7 p-0">
    <div class="input-group input-group-sm">
      <input type="text" class="form-control" placeholder="номер телефона">
      <div class="input-group-append">
        <div class="input-group-text append-box"><span class="far fa-phone"></span></div>
      </div>
    </div>
  </div>
</div>

Как сделать так, чтобы фокусная рамка захватывала и пиктограмму, т.е. всю группу ввода?

Answer 1

Один из вариантов

.input-group-custom{  
  position: relative;
}

.input-group-custom .form-control{
  padding-right: 50px; /* width icon */
}

.input-group-custom .input-group-append{  
  position: absolute; top: 0; right: 0;
  z-index: 99;
}

body {
  padding: 2rem;
}

.input-group {
  position: relative;
}

.form-control {
  padding-right: 50px;  /* width icon */
  border-radius: .2rem!important;
}

.form-control:focus+.input-group-append .input-group-text {
  border-color: #80bdff;
}

.input-group-append {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="d-flex flex-row form-group">
  <div class="col-5 pr-3 text-right">
    <small><label for="inputTel" class="col-form-label">Телефон:</label></small>
  </div>
  <div class="col-7 p-0">
    <div class="input-group input-group-sm input-group-custom">
      <input type="text" class="form-control" placeholder="номер телефона">
      <div class="input-group-append">
        <div class="input-group-text append-box"><span class="far fa-phone">Icon</span></div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Общий фокус для "группы ввода" bootstrap 4

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