Несколько элементов ввода с одной границей в Bootstrap - PullRequest
0 голосов
/ 10 мая 2018

[Обновлено / Решено]

Я пытаюсь установить одну границу между несколькими входами внутри группы форм в начальной загрузке, но эта граница работает только если нетфокус и последний вход.Мои ожидания границы работают как фокус, а не фокус.

.container{
margin-top:20px;
width:80%;
}
.input-merge [class*="col-"]{
padding:0;
}

.form-control{
border-radius:0 !important;
}

.form-control:focus {
 position: relative;
 z-index: 1;
}

.input-merge div:not(:first-child) {
    margin-left: -1px;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
<div class="container">
<div class="form-group input-merge">
   <div class="col-xs-4">
      <input type="text"  class="form-control" placeholder="Input One">
   </div>
   <div class="col-xs-4">
      <input type="text"  class="form-control" placeholder="Input Two">
    </div>
    <div class="col-xs-4">
      <input type="text"  class="form-control" placeholder="Input Three">
    </div>
   </div>
</div>
</body>

Как это исправить?Спасибо.

1 Ответ

0 голосов
/ 10 мая 2018

Вы можете добавить следующее к вашему CSS;

.form-control:focus { position: relative; z-index: 1; }

Это ставит сфокусированный вход выше других.Поэтому контур фокуса (свечение) будет полностью виден.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...