Vertical Legends

index.html

<h1>Vertical Legends</h1>
<form>
    <fieldset>
        <legend>First Group</legend>
        <label>1.A
            <input type="text">
        </label>
        <label>1.B
            <input type="text">
        </label>
        <label>1.C
            <input type="text">
        </label>
        <label>1.D
            <input type="text">
        </label>
    </fieldset>
    <fieldset>
        <legend>Second Group</legend>
        <label>2.A
            <input type="text">
        </label>
        <label>2.B
            <input type="text">
        </label>
        <label>2.C
            <input type="text">
        </label>
        <label>2.D
            <input type="text">
        </label>
    </fieldset>
    <input type="submit">
</form>

style.css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #005f8c;
}
body {
	margin: 100px;
}

h1 {
	margin: 10px 0;
}
form {
	border: 1px solid lightgray;
	padding: 20px;
	overflow: auto;
}	


fieldset {
	background: whitesmoke;
	border: none;
	padding-left: 20px;
	min-height: 150px;
	position: relative;
	border: 1px solid #005f8c;
	margin: 0 0 20px;
}

legend {
	background: #005f8c;
	color: white;
	text-transform: uppercase;
	text-align: center;
	padding: 3px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;

	/* turn the text sideways */
	-o-writing-mode: vertical-lr;
	-ms-writing-mode: vertical-lr;
	-moz-writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;

	/* flip th etext around */
	-o-transform: rotate(180deg); /* Opera */
	-ms-transform: rotate(180deg); /* IE */
    -moz-transform: rotate(180deg); /* Moz */
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg0);
}

label {
	float: left;
	background: ;
	margin: 10px;
}

input {
	display: block;
	width: 100%;
  margin-top: 3px;
	padding: 5px;
	border: 1px solid #005f8c;
}

input[type="submit"] {
  background: #005f8c;
  padding: 10px 0;
  border: none;
  color: white;
}

input[type="submit"]:hover {
  background: #00416c;
}

vertical-legends.markdown

Vertical Legends

Rotate form legends to condense vertical space on complex forms.

A Pen by Kevin O'Hara on CodePen.

License.