Design boxes for data in CSS

Question

I am working on a html/css version of a payment order. I have to make the fields for numbers and letters.

I want to make fields like these:

Can anyone give me any guidelines how to accomplish this? In particular, I can't figure out how to make the interrupted lines that are between two boxes.

Is this for printing...because an online form wouldn't need that styling...would it? — Paulie_D, Feb 23 '16 at 21:18

Hatchet · Accepted Answer · 2016-02-24T12:36:50.797

I don't know what you've tried, nor what you have right now, but I did my best with the information I'd been given.

First, I used flexboxes just because they make everything so much easier.

The container has a display of flex.

Each box (group of 4 or 2 cells) has a border of 1px solid #C3A488 and a display of inline-flex.

Each cell has a ::before pseudo element with a width of 1 pixel and a linear gradient for a background.

I used the :first/last-child selectors to get the borders just right.

html,
body {
  background: #FEE0D6;
}

.container {
  display: flex;
}

.container .box {
  border: 1px solid #C3A488;
  border-right: 0;
  display: inline-flex;
}

.container .box:last-child {
  border-right: 1px solid #C3A488;
}

.container .box .cell {
  display: inline-block;
  width: 1em;
  height: 1.2em;
  background-color: white;
}

.container .box .cell::before {
  content: '';
  width: 1px;
  display: inline-block;
  height: 100%;
  background: linear-gradient(180deg, #DFDCD3 0%, #DFDCD3 33.33%, transparent 33.33%, transparent 66.66%, #DFDCD3 66.66%, #DFDCD3 100%);
}

.container .box .cell:first-child::before {
  content: none;
}

<div class="container">
    <div class="box">
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
    </div>
    <div class="box">
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
    </div>
    <div class="box">
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
    </div>
    <div class="box">
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
    </div>
    <div class="box">
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
        <span class="cell"></span>
    </div>
    <div class="box">
        <span class="cell"></span>
        <span class="cell"></span>
    </div>
</div>

it looks awesome, but how can i instead of dashe have it interupted just once like in the picture? — mheonyae, Feb 24 '16 at 08:25
@mheonyae Sure. I just changed the border to a pseudo element with a background of a linear gradient. — Hatchet, Feb 24 '16 at 12:37
that looks pretty close, but the dashed lines are still visible and the two gradient ones are a bit too much to the right — mheonyae, Feb 24 '16 at 14:07
@mheonyae To indicate to the wider community that you've found a solution, you may [accept](http://meta.stackexchange.com/q/5234/179419) my answer by clicking the check-mark. This gives some reputation to both me and yourself. There is no obligation to do this. Happy Coding! — Hatchet, Feb 24 '16 at 14:37

Design boxes for data in CSS

1 Answers1