Combining two input tags like a single input

user_18934437 0
Viewed 44

I'm new to HTML and I have some questions regarding input tags. Here I have two inputs seperated by a span tag(-). What I want to do is to wrap two inputs like a single input like the image below. Do I need to add styles using css or change the whole structure of the code?

<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>

ideal structure

html
1 Answers

Here is easy solution:

  1. Set border for inputs to 0 to make them invisible.
  2. Add border 1px with color you need to parent div.
  3. Don't forget to make this parent 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>

user_64852490
Related