UJHINL - Forms v4

by PhilQ

HTML

<div class="modulecontentbox-contentwrapper">
	<h3>
		Type hier de vraag
	</h3>
	<div class="frmwrap">
		<input type="radio" name="fe3" id="fe3_0" value="0" />
		<label for="fe3_0">
		Optie 1
		</label>
		<input type="radio" name="fe3" id="fe3_1" value="1" />
		<label for="fe3_1">
		Optie 2
		</label>
		<input type="radio" name="fe3" id="fe3_2" value="2" />
		<label for="fe3_2">
		Optie 3
		</label>
	</div>
</div>
<div class="modulecontentbox-contentwrapper">
	<h3>
		Type hier de vraag
	</h3>
	<div class="frmwrap">
		<input type="checkbox" name="fe4[]" id="fe4_0" value="0" />
		<label for="fe4_0">
		Optie 1
		</label>
		<input type="checkbox" name="fe4[]" id="fe4_1" value="1" />
		<label for="fe4_1">
		Optie 2
		</label>
		<input type="checkbox" name="fe4[]" id="fe4_2" value="2" />
		<label for="fe4_2">
		Optie 3
		</label>
	</div>
</div>
<div class="modulecontentbox-contentwrapper">
	<h3>
		Type hier de vraag
	</h3>
	<div class="frmwrap">
		<select name="fe5">
			<option value="0">
			Optie 1
			</option>
			<option value="1">
			Optie 2
			</option>
			<option value="2">
			Optie 3
			</option>
		</select>
	</div>
</div>
<div class="modulecontentbox-contentwrapper">
	<h3>
		Type hier de vraag
	</h3>
	<div class="frmwrap">
		<table class="matrix">
			<tr>
				<td>
				</td>
				<td>
					<div>
						<span>
							Kolom 1
						</span>
					</div>
				</td>
				<td>
					<div>
						<span>
							Kolom 2
						</span>
					</div>
				</td>
				<td>
					<div>
						<span>
							Kolom 3
						</span>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					Rij 1
				</td>
				<td>
					<input type="radio" name="fe6[0][value]" id="fe6_0_0" value="0" />
					<label for="fe6_0_0">
					</label>
				</td>
				<td>
					<input type="radio" name="fe6[0][value]" id="fe6_0_1" value="1" />
					<label for="fe6_0_1">
					</label>
				</td>
				<td>
					<input type="radio" name="fe6[0][value]" id="fe6_0_2" value="2" />
					<label...

CSS

*, *:before, *:after {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
    float: left;
    clear: left;
    width: 100%;
    color: #462d5a;
}

h2, h3, h4, h5, h6 {
    color: #70678e;
}
.modulecontentbox-content {
	clear: left;
	float: left;
	width: 100%;
	min-height: 72px;
	padding: 10px;
	padding-left: 48px;
	border-top: 2px solid #462d5a;
}
.modulecontentbox-content.green {
	background-color: #d0ced2;
	color: #70678e;
}
.modulecontentbox-content.completed {
    background-image: url("../img/approved-64.png");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-origin: content-box;
}
.modulecontentbox-content > div.modulecontentbox-contentwrapper > h3 {
    float: left;
    clear: left;
    width: 100%;
    margin-bottom: 3px;
}
.modulecontentbox-content > div.modulecontentbox-contentwrapper > span {
    float: left;
    clear: left;
    width: 100%;
    font-size: 90%;
    /* color: #9d9d9d; */
    /* font-style: italic; */
    margin-bottom: 10px;
}
.modulecontentbox-content > div.modulecontentbox-contentwrapper > i {
    float: left;
    clear: left;
    width: 100%;
    font-size: 60.5%;
    color: #9d9d9d;
    color: #919861;
    font-style: normal;
    margin-top: 2px;
    padding-left: 20px;
}
.modulecontentbox-content div.modulecontentbox-contentwrapper {
	float: left;
	clear: left;
	width: 100%;
    margin-top: 20px;
}
.modulecontentbox-content div.modulecontentbox-contentwrapper:first-child {
	margin-top: 0px;
}
.modulecontentbox-content div.frmwrap {
	float: left;
	clear: left;
	width: 100%;
	padding-left: 20px;
}
.modulecontentbox-content div.html {
	width: 100%;
	float: left;
	clear: left;
}





/* == Forms styles == */

input, textarea, select {
    float: left;
    clear: left;
    outline: 0px;
    padding: 2px;
    font-family: 'MyriadProWeb', Arial, Verdana, Tahoma,...