How do I add horizontal line between select fields

Question

How do I add horizontal line between select fields as follows:

Please check the horizontal line between each other:

Maybe this would help: https://stackoverflow.com/questions/19382872/how-to-connect-html-divs-with-lines — StardustGogeta, Sep 17 '16 at 18:55
Welcome to SO! Questions should generally be more of the "I'm trying to do this, this is what I tried, this is the way in which it isn't working, where am I going wrong?" type. (See http://stackoverflow.com/help/asking) To improve this question, please add your current code (hit "edit" and then hit the `<>` icon which will pop up a window for inputting your html and css. then hit "save and insert" and save your edit) — henry, Sep 17 '16 at 18:57
Post some code so we have with what to work. Also, you haven't accepted any of your earlier questions, so I suggest you check them, add additional info so they can be properly answered, so you can accept them....we want to have as many question as possible with an accepted answer, so future users can see which of the posted suited a question best. — Asons, Sep 17 '16 at 19:00

score 1 · Answer 1 · answered Sep 17 '16 at 19:28

Try this

.line {
  position: relative;
  padding-left: 10px;
}
.line:first-child {
  padding-left: 0;
}
.line select {
  position: relative;
}
.line:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: red;
}

<span class="line">
    <select>
        <option>lorem</option>
    </select>
</span>
<span class="line">
    <select>
        <option>lorem</option>
    </select>
</span>
<span class="line">
    <select>
        <option>lorem</option>
    </select>
</span>

score 0 · Answer 2 · answered Sep 17 '16 at 19:23

You can try this JSFiddle

.wrapper{
  position:relative;
}

.select2, .select1{
  height:20px;
  width:40%;
  position:absolute;
}

.select1{
  left:0;
}

.select2{
  right: 0;
}

.line{
  position:absolute;
  border-bottom: 1px solid red;
  top:10px;
  left:0;
  right:0;
}

Line's width is the same as wrapper's one.

<div class="wrapper">
  <div class="line">
  </div>
  <select class="select1">
    <option>1</option>
    <option>2</option>
  </select>
  <select class="select2">
    <option>1</option>
    <option>2</option>
  </select>
</div>

How do I add horizontal line between select fields

2 Answers2