Form example - input text

In this example below you will see how to do a Form example - input text with some HTML / CSS and Javascript

This awesome code was written by jumbo, you can see more from this user in the personal repository.
You can find the original code on
Copyright jumbo ©
  • HTML
  • CSS
  • JavaScript
    <input type="text" class="input_txt" />

/*Downloaded from */
    @import "compass/css3";

$form-spacing : 10px;
$input-font-family: inherit;
$input-font-color: #333;
$input-font-size: 12px;
$input-bg-color: #fff;
$input-focus-bg-color: #fff;
$input-border-color: #bbb;
$input-focus-border-color: #06c;
$input-border-style: solid;
$input-border-width: 1px;
$input-disabled-bg: #eee;
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);

// all basic form elements their style
@mixin form-element() {
  background-color: $input-bg-color;
  font-family: $input-font-family;
  border: $input-border-width $input-border-style $input-border-color;
  color: $input-font-color;
  //display: block;
  font-size: $input-font-size;
  margin: 0;
  padding: ($form-spacing - 2px)/2 $form-spacing /2;
  height: 14px;
  line-height: 14px;
  width: 100%;

  // Basic focus styles
  &:focus,&.focus {
    background: $input-focus-bg-color;
    border-color: $input-focus-border-color;
    outline: none;

  // Disabled background input background color
  &[disabled],&.readonly { background-color: $input-disabled-bg; }

label, input, button, select, textarea { 
	display: inline-block;
	vertical-align: middle;

button,input[type="button"],input[type="reset"],input[type="submit"] {
	-webkit-appearance: button;

	@include form-element();
	width: 255px;
	&.error {
		border-color:#d80000 !important;
		background-color: #fffcd8 !important;

/*Downloaded from */