Wij Kakid Form Reset

index.pug

p
	label Text
	input(type='text')

p
	label Email
	input(type='email')

p
	label Password
	input(type='password')


p
	label Select
	select
		option who
		option wut
		option y u no?

p
	label Textarea
	textarea

p
	label Radio
	input(type='radio' name='tester')
	input(type='radio' name='tester')
	input(type='radio' name='tester')
	label Disabled
	input(type='radio' name='testerD' disabled)
	input(type='radio' name='testerD' checked disabled)

p
	label Checkbox
	input(type='checkbox')
	input(type='checkbox')
	input(type='checkbox')
	label Disabled
	input(type='checkbox' disabled)
	input(type='checkbox' checked disabled)

p
	label Number
	input(type='number')

p
	label Date
	input(type='date')

//p
	label File
	input(type='file')


// kitchen sink
p
	label Buttons
	button button
	input(type='submit') 
	input(type='button' value='Button') 
	input(type='reset')
//p
	input(type='date')
	input(type='datetime')
	input(type='datetime-local')
	input(type='email')
	input(type='month')
	input(type='number')
	input(type='password')
	input(type='range')
	input(type='search')
	input(type='tel')
	input(type='text')
	input(type='url')
	input(type='time')
	input(type='week')
	input(type='file')
	input(type='search')

script.js

function que(dis) { return document.querySelectorAll(dis) }


var oop = que('select')[0]

style.less

// GLOBALS

@font-copy: 'Arial';

@color-body: #eee;
@color-copy: #333;
@color-base: #333;
@color-text: #fff;
@color-hover: #555;
@color-focus: #1be;

@color-disabled: silver;

@rounding-round: 50%;
@rounding-smooth: 0.125em;

// DOCUMENT

body {
	background-color: @color-body;
	color: @color-copy;
	font-family: @font-copy;
}

p {
	// flexbox isn't worth it
	//display: flex;
	//justify-content: flex-end;
	text-align: right;
	margin: 0.5em 0;
}

::selection {
	background-color: @color-focus;
	color: @color-base;
}

// INPUTS

button,
input,
label,
select,
textarea {
	box-sizing: border-box;
	display: inline-block;
	font-size: 1em;
	font-family: @font-copy;
	line-height: 1;
	margin: 0;
	padding: 0.5em;
	vertical-align: middle;
	white-space: normal;
}

button,
input,
select,
textarea {
	background-color: @color-base;
	border: none;
	border-radius: @rounding-smooth;
	color: @color-text;
	padding: 0.5em;
	text-overflow: ellipsis;
	&:hover {
		background-color: @color-hover;
	}
	&:focus {
		outline: none;
		box-shadow: 0 0 0.125em 0.125em fadeout(@color-focus, 20%);
		outline: 0.125em solid fadeout(@color-focus, 60%);
		z-index: 1;
	}
}


select {
	appearance: none;
	border-radius: @rounding-smooth;
	//border: 1px solid black;
	.icon-base;
	background-position: right center;
	padding-right: 1em;
	.icon-select;
	&:hover {
		//border-color: @color-hover;
	}
}

select[multiple] {
	vertical-align: top;
}


// YE OLDE TEXTAREA

textarea {
	overflow: auto;
	resize: none;
	vertical-align: top;
}


// CHECKBOXEN UND RADIO

input[type=checkbox],
input[type=radio] {
	appearance: none;
	height: 1em;
	width: 1em;
	.icon-base;
	&:disabled {
		background-color: @color-disabled;
	}
	&:disabled:hover {
		background-color: darken(@color-disabled, 5%);
	}
}

input[type=checkbox] {
	border-radius: @rounding-smooth;
	&:checked {
		.icon-check;
	}
}

input[type=radio] {
	border-radius: @rounding-round;
	&:checked {
		.icon-radio;
	}
}



// TEXT FIELDS

input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=range],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week] {
	//  background-color: chartreuse;
	//border-bottom: 0.125em solid @color-focus;
}



button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	overflow: visible;
	width: auto;
}

input[type=file] {}







// WEBKIT ONLY

body {
	-webkit-font-smoothing: antialiased;
}

input[type=search] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
}

::-webkit-search-decoration {
	display: none;
}

::-webkit-file-upload-button {
	padding: 0;
	border: 0;
	background: none;
}

/**/


.icon-base {
	background-repeat: no-repeat;
	background-size: 1em;
}

.icon-select {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsBAMAAACLU5NGAAAAElBMVEX///////////////////////+65XQCAAAABnRSTlMAP0D1/0H3M020AAACIUlEQVR4Ae3dsUlEYQAE4VMwF64BwQpcrgNfB/bfi7uR6R8cMsFMCV8BuzdygMzMzMzMzMzMzMzMXj5uxO5BYj2+iVz36woR67p4XMVqIWKNC4jVQsQaFxCrhYg1LiBWCxFrXECsFiLWuIBYLUSscQGxWohY4wJitRCxxgXEaiFijQuI1ULEGhcQq4WINS4gVgsRa1xArBYi1riAWC0cLADX59VwXK/FonEdYLUQscYFxGohYo0LiNW+iFjleidilYuINS4iVrmIWOMiYpWLiDUuIla5iFjjImKVi4g1LiJWuYhY4yJilYuINS4iVrmIWOMiYpWLiDUuIla5iFjjImKVi4g1LiJWuYhY4yJilYuINS4iVrmIWOMiYpWLiHXEZWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmb4/roP+frfi5nlCQXMMCchULyDUsIFexgFzDAnIVC8g1LCBXsYBcwwJyFQvINSwgV7GAXMMCchULyFUs4k5FmBMoxQJyFQvINSwgV7GAXMMCchULyDUsIFexgFzDAnIVC8g1LCBXsYBcwwJyxRnWc6448XvOFeej4WPb5TrA4nEVC8g1LCBXsYBcwwJyFQvINSwgV7GAXMMCchULyDUsIFexgFzDAnIVC8g1LCBXsYBcwwJyFQvINSwgV7wMfeLBqne0f1zx6vicK95on3PFi/Zzrnj/f85FxCoXAAudmZmZmZmZmZmZmdkvV8wxFxIFpLAAAAAASUVORK5CYII=');
}

.icon-check {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAMAAABOo35HAAAASFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////neHiwAAAAGHRSTlMAO3v/euEPIh673Xwd3hCLIYKh+ML7Pz68TpmgAAABuElEQVR4Ae3QxWFbAQBAsd+ame39Jy03ub4wSSNoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABe3TcF2ffRWEK+GvUtV33LVd9y1bdc9S1XfctV33LVt1z1LVd9y1XfcmWrX9nqV7b6la1+Zatf2epXtvqVrX5lq1/Z6le2+pWtfPVAk6mrfDVz5cqVK1fvgitXrly5cuXKlStXrly5cuXKlStXrly5cjVfzF3Vq+VombdcjR62tfraV33LVd9y1bdc9S1XfctV33LVt1z1LVd9y1XfctW3XPUtV2nL1fr+Km656luu+parvuWqb7nqW676lqtoM//CV9t+9W9rN3qgyX74LA6jrutXtvqVrX5lq1/Z6le2+pWteGUrXNkKV7bClS1XYctV33LVt1z1LVd9y1XfctW3XPUtV33LVd9y1bdc9S1XfctVcHzo1Wk/fF3nh11drkNkq1/Z6le2XPUtV33LVd9y1bdc9S1XfctV33LVty63gbjlqm+56luu+parvuWqb/UrW676lqu+5apvuepbrvqWqwfYDwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwED8B9CVWwFlR198AAAAASUVORK5CYII=');
}

.icon-radio {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAMAAABOo35HAAABOFBMVEX////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////iDWJFAAAAaHRSTlMABTBdhqbF2Ovy//jt3dADOYHB9gE/mEAQddzbF44YDPWHXuYgulzxB5vIKN4x6S3u7x3jHhUGx4+QUP67X2AO54mI83Q7PIKn2ez539LEonlUUyyZQXbokSnqL+DKGgicvIoP9BGawi8GJbMAAALISURBVHgB7MFFAYBAAACwU9zp35UnVmFbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB5iyqU2bdcP4zQvTS05xfDHuu3HOfycx75d7N0Dfi5BEATwipP6IZo438a2bdu273+CZ3Mx89DT/zOst7sqH19QpqQ0lz+VW1pm8J4qr6jkb1RVlEMB1ak8hpCXCuC7msxahlRbVwOfmfoGRtBQb+CtxiZG1NQITzW3MLKWZviotY2xtLXCO0E7Y2oP4JmOTsbW2QGvdHUzge4ueKSnl4n09cAb/QNMaGAQnhiqYmJVQ/DC8AgtGBmGD0ZpxRg8MD5BKybGIV5jLy3pbYRwZpLWNBnINkWLpiHazCwtmp2BZHO0ah6CVdfSqtpqfcQKbxRilS/QsoVySLVI6yoglKmidVUGMpXRgTLIVEoHSiFSfi4dyM2HREt0YhkSFdKJFUhURCeKINBwMZ0oHoY86XQkHfJk0JEMyJNJR+ogzyodWYU82XQkG/Ks0ZE1yJNLR9YhTx4dWYA8dAbybNAVyLOup2F4m3qBD2+LjqzpF5rwtiHPDh3ZgTy7dGQX8uzRkX3Ic0BHDpCAflYWQH9Y6K8w/cmqv+91MORQR47CO0JCOswmQAWtO4YDOoCro91jkCuopVW1AcLSdZQ5hKWLTiczEG1aV+j+znLmpIFwjX269qsL5W6c0opTJKchGLIMVTKxziF44uycCZ2fwRsXSSOh0hGSho2dd8ErZ5eM7fIMIWlA4tU1vHNzy1hub+CUhroK0HjHiO4a4S0zFS2IesrAZzNztQyp9v4BvgvGHhnC41gAQD0dV/I3Ko+foN4zR4e/Kvx4PjJQX8gvWHn5UZXMy4pWyfyipGhtvZasXV/TkqLX7cGBAAAAAIAgf+sBVqgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAge+KvaJDoFrAAAAAElFTkSuQmCC');
}

wij-kakid-form-reset.markdown

Wij Kakid Form Reset

Barebones Form Elements Reset Starter Kit: seeking the simplest minimal form styles for easy reuse with inline minified PNG icons in Base-64 free for any use

A Pen by Something Formed on CodePen.

License.