Question

I have two text boxes:

<label class="q">A<input maxlength="9" /></label>

and

<label class="q">B<input maxlength="9" /></label>

I want to split these two boxes with a vertical line, on the center of the line, there’s an “OR” text.

The idea was to make it clear to the user that input in either of the textbox is fine.

I tried using float:left and float:right to separate the two areas and use border-left: 1px solid gray as a separator, but how can I display a text in the middle of a vertical line?

Answer 1

One way is to insert an element between them and inside it put the OR and the vertical line.

Demo at http://jsfiddle.net/gaby/4hCUq/1/

---

Another would be to use CSS only for it (by using pseudo elements like :before and :after to insert the line and text)

HTML

<label class="q">A<input maxlength="9" /></label>
<label class="q or">B<input maxlength="9" /></label>

CSS

.q{
    float:left;
    margin-left:50px;
    width:150px;
    position:relative;
}
.or:before{
    content:' ';
    width:1px;
    height:150%;
    top:-25%;
    background-color:black;
    left:-25px;
    position:absolute;
    z-index:100;

}
.or:after{
    content:'OR';
    left:-50px;
    position:absolute;
    z-index:101;
    background-color:white;
    font-size:smaller;
    top:2px;
    text-align:center;
    width:50px;
}

CSS Demo at http://jsfiddle.net/gaby/4hCUq/