Объединение двух входных тегов как один вход

Я новичок в HTML, и у меня есть несколько вопросов относительно тегов ввода. Здесь у меня есть два входа, разделенных тегом span (-). Что я хочу сделать, так это обернуть два входа как один вход, как показано на рисунке ниже. Нужно ли добавлять стили с помощью css или менять всю структуру кода?

<div class="form-group">
<label for="form-realname" class="col">test*</label>
    <div class="input-group col">
        <input type="text" class="form-control" placeholder="" />
        <span class="input-group-text" >-</span>
        <input type="text" class="form-control" placeholder=""  />
    </div>    

идеальная структура

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот простое решение:

  1. Установите border для входных данных на 0, чтобы сделать их невидимыми.
  2. Добавьте border 1px с цветом, который вам нужен, в родительский элемент div.
  3. Не забудьте сделать этот родительский div display: inline-block;

* {
  margin: 0;
  padding: 0;
}

input.form-control {
  border: 0;
  padding: 2px;
}

.input-group {
  border: 1px solid gray;
  display: inline-block;
}
<div class="form-group">
    <label for="form-realname" class="col">test*</label>
    <div class="input-group col">
        <input type="text" class="form-control" placeholder="" />
        <span class="input-group-text" >-</span>
        <input type="text" class="form-control" placeholder=""  />
    </div>
</div>

Также вам следует добавить больше css, чтобы сделать состояние :active более чистым.

Vetos 17.05.2022 09:10

Другие вопросы по теме