flexbox-form

by akogch

HTML

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Forms Complete Example</title>
    <link
      rel="stylesheet"
      href="https://necolas.github.io/normalize.css/4.0.0/normalize.css"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="css/form.css" />
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Personal details</legend>
        <label class="required">
          <span>First Name</span>
          <input
            id="given-name"
            name="first-name"
            type="text"
            placeholder="First name only"
            required
          />
          <span class="note"
            ><i class="fa fa-question-circle"></i> Note field</span
          >
        </label>
        <label>
          <span>Last Name</span>
          <input id="family-name" name="last-name" type="text" />
          <span class="note"
            ><a href="" class="fa fa-question-circle" title="Click for help"></a
          ></span>
        </label>
        <label>
          <span>Date of Birth</span>
          <input id="dob" name="dob" type="date" />
        </label>
        <label>
          <span>Email</span>
          <input id="email" name="email" type="email" />
        </label>
        <label>
          <span>URL</span>
          <input id="url" name="url" type="url" />
        </label>
        <label>
          <span>Telephone</span>
          <input id="phone" name="phone" type="tel" />
        </label>
        <label>
          <span>Shoe size</span>
          <input
            id="shoes"
            name="shoes"
            type="number"
            min="5"
            max="18"
            step="0.5"
            value="9"
          />
        </label>
        <label>
          <span>Flying Skill level (1 low - 100 high)</span>
          <input
            id="skill"
            name="skill"
...

SCSS

form, 
fieldset {
	display: flex;
	// align-content: flex-start;
	flex-direction: column;
	width: 100%;
}
label {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	justify-content: flex-start;
	padding: 5px;
}
fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	span:not(.note) {
		width: 50%;
		text-align: right;
		padding: 0 1rem 0 0;
	}
	fieldset {
		label {
			justify-content: flex-end;
			span:not(.note) {
				text-align: left;
				padding: 0 0 0 1rem;
			}
		}
	}
}
a.fa {text-decoration: none;}
.note {color: #777;}
button,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {margin-right: 1rem;}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    border: 1px solid #ccc;
    line-height: normal;
    padding: 0.25rem 0.5rem;
    .required & {
    	border: 1px solid #777;
	}
	&:focus {
		border: 1px solid #777;
		background-color: #f0f0f0;
		outline: 0;
		&::-webkit-input-placeholder {color:transparent;}
		&::-moz-placeholder {color:transparent;} 
		&::-moz-placeholder {color:transparent;}
		&::-ms-input-placeholder {color:transparent;}
	}
}
textarea {vertical-align: top;}

select {
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"32\" height=\"24\" viewBox=\"0 0 32 24\"><polygon points=\"0,0 32,0 16,24\" style=\"fill: rgb%28138, 138, 138%29\"></polygon></svg>");
    background-position: right 0.8rem center;
    padding-right: 2rem;
    background-repeat: no-repeat;
    background-size: 9px 6px;
}
label.required {
	span:not(.note) {font-weight: bold;
		&:after {content: " *";}
	}
}