RWD | Responsive HTML5 form elements with CSS Flexbox
/*
Responsive form elements
Flexbox layout
*/
/*/////////////// GLOBAL STYLES ////////////////////*/
body{padding: 30px; background: #eee;}
header{margin-bottom: 5rem;}
/*/////////////// FONT STYLES ////////////////////*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html{font-size: 62.5%;}
body{font-family: 'Open Sans', sans-serif;}
h1{font-size: 3rem;}
h2{font-size: 1.6rem;}
form{font-size: 1.4rem;}
/*/////////////// FORM STYLES ////////////////////*/
form .field-group{
display: flex;
margin: 0 0 12px 0;
}
form .field-group .label{
flex: 1;
text-align: right;
margin: 0 8px 0 0;
padding: 2px 0;
}
form .field-group .field{
flex: 3;
}
form .field-group:last-child{
display: flex;
justify-content: flex-end;
}
form .field-group:last-child .field{
max-width: 75%;
}
input, select, textarea{
padding: .4rem 1rem;
font-size: 1.8rem;
border: solid 1px #eee;
background: #fff;
box-sizing: border-box;
}
textarea {
width: 100%;
}
input, select{
width: 50%;
}
input[type="radio"],
input[type="checkbox"],
input[type="submit"]{
width: auto;
}
/*/////////////// RWD STYLES ////////////////////*/
@media (max-width: 720px) {
form .field-group .label{
text-align: left;
margin: 0;
}
input, select{
width: 60%;
}
}
@media (max-width: 480px) {
input,
select{width: 100%;}
input[type="radio"],
input[type="checkbox"],
input[type="submit"]{
width: auto;
}
form .field-group{
display: flex;
flex-direction: column;
margin: 0 0 6px 0;
}
form .field-group .label{
padding: 0 0 5px 0;
margin: 10px 0 0 0;
}
}
<header>
<h1>Forms</h1>
<h2>Responsive HTML5 form elements with CSS Flexbox</h2>
</header>
<form action="#">
<!--///////////////// TEXT FIELDS ///////////////////-->
<div class="field-group">
<label for="text1" class="label">Full Name:</label>
<div class="field">
<input name="text1" id="text1" type="text" value="" required>
</div>
</div>
<div class="field-group">
<label for="email1" class="label">Email:</label>
<div class="field">
<input name="email1" id="email1" type="email" spellcheck="false" value="" required>
</div>
</div>
<div class="field-group">
<label for="number1" class="label">Age:</label>
<div class="field">
<input name="number1" id="number1" type="number" value="">
</div>
</div>
<div class="field-group">
<label for="url1" class="label">Website URL:</label>
<div class="field">
<input name="url1" id="url1" type="url" value="">
</div>
</div>
<div class="field-group">
<label for="tel1" class="label">Phone:</label>
<div class="field">
<input name="tel1" id="tel1" type="tel" value="">
</div>
</div>
<div class="field-group">
<label for="date1" class="label">Birthday:</label>
<div class="field">
<input name="date1" id="date1" type="datetime-local" value="">
</div>
</div>
<!--///////////////// TEXTAREA ///////////////////-->
<div class="field-group">
<label for="textarea1" class="label">Description:</label>
<div class="field">
<textarea id="textarea1" name="textarea1" spellcheck="true" rows="10" cols="50"></textarea>
</div>
</div>
<!--///////////////// SELECT MENU ///////////////////-->
<div class="field-group">
<div class="label">Multiple choice:</div>
<div class="field">
<select id="select1" name="select1">
<option value="First Choice">First Choice</option>
<option value="Second Choice">Second Choice</option>
<option value="Third Choice">Third Choice</option>
</select>
</div>
</div>
<!--///////////////// RADIO GROUP ///////////////////-->
<div class="field-group">
<div class="label">Single choice:</div>
<div class="field">
<div>
<input id="radio1" name="radio" type="radio" value="First Choice" checked="checked">
<label for="radio1">First Choice</label>
</div>
<div>
<input id="radio2" name="radio" type="radio" value="Second Choice">
<label for="radio2">Second Choice</label>
</div>
<div>
<input id="radio3" name="radio" type="radio" value="Third Choice">
<label for="radio3">Third Choice</label>
</div>
</div>
</div>
<!--///////////////// CHECKBOX GROUP ///////////////////-->
<div class="field-group">
<div class="label">Multiple choice:</div>
<div class="field">
<div>
<input id="check1" name="check1" type="checkbox" value="First Choice">
<label class="check" for="check1">First Choice</label>
</div>
<div>
<input id="check2" name="check2" type="checkbox" value="Second Choice">
<label class="check" for="check2">Second Choice</label>
</div>
<div>
<input id="check3" name="check3" type="checkbox" value="Third Choice">
<label class="check" for="check3">Third Choice</label>
</div>
</div>
</div>
<!--///////////////// SUBMIT BUTTON ///////////////////-->
<div class="field-group">
<div class="field">
<input id="saveForm" name="saveForm" type="submit" value="Submit">
</div>
</div>
</form>
HTML form with responsive web design. Furthermore it's done with CSS Flexbox, so no floats are used at all. This form layout was inspired by another pen made by Chris Coyier: http://codepen.io/chriscoyier/pen/DmnlJ
A Pen by Torben Colding on CodePen.