Decorator

Search Form: Simple Minimalistic

Example:


	


	

		



/*---------- STANDALONE STYLE -----------*/

form {
    float: left;
    font-family: Arial;
}

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
    outline:none;
}

input:focus, input:active, textarea:focus, .search-form input:focus{
    border-color: #3FA8E2;
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -ms-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
}

form .button{
    height: 34px;
}

/* default button */
.button {
    float: left;
    margin: 0;
    padding: 4px 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #CCC;
    color: #66757F;
    line-height: 20px;
}

.button:hover {
    background: #f8f8f8;
    color: #333;
}

.button:focus, .button:active {
    outline: none !important;
}


/* serch form extra edits */

.search-form input {
    width: 250px;
}

/* button form-right extra */
.search-form .button-right {
    border-left: none !important;
}

/* button form-left extra */
.search-form .button-left {
    border-right: none !important;
}



		

	





	


	

		
Search Form: Rounded Corners

	





Example:



    
    







    
    








	
	

		

	

	

		



/*---------- STANDALONE STYLE -----------*/

form {
    float: left;
    position: relative;
    font-family: Arial;
}

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
    outline: none;
}

input:focus, input:active, textarea:focus, .search-form input:focus{
    border-color: #3FA8E2;
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -ms-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
}

form .button{
    height: 34px;
}

/* default button */
.button {
    float: left;
    margin: 0;
    padding: 4px 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #CCC;
    color: #66757F;
    line-height: 20px;
}

.button:hover {
    background: #f8f8f8;
    color: #333;
}

.button:focus, .button:active {
    outline: none !important;
}

/*----------SEARCH FORM EXTRA EDITS----------*/

/* serch form rounded input edit */
.rounded-form input {
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    padding-left: 12px;
    padding-right: 12px;
}

/* rounded input form default button extra edit */
.rounded-form .button{
    background-color: transparent !important;
    border: none !important;
    color: #057ed0;
}

/*----------------LEFT FORM EXTRA EDIT-----------------*/

/* rounded input form left extra padding right */
.rounded-form .input-left {
    padding-right: 75px;
    width: 240px;
}

/* rounded input form button right */
.rounded-form .button-right {
    position: absolute;
    right: 2px;
    border-left: 1px solid #ccc !important;
    width: 68px;
}

/*---------------RIGHT FORM EXTRA EDIT----------------*/

/* rounded input form right extra padding left */
.rounded-form .input-right {
    padding-left: 75px;
    width: 240px;
}
/* rounded input form button left */
.rounded-form .button-left {
    position: absolute;
    left: 2px;
    border-right: 1px solid #ccc !important;
    width: 68px;
}



		

	










	
Basic login form: Basic login form example with legend and fieldset









Example:




    

	Legend

	
	
	Enter your username


	
	
	Enter your password

	

	
    










	
	

		

	


	

		



/*---------- STANDALONE STYLE -----------*/

form {
    float: left;
    font-family: Arial;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #444;
    line-height: 12px;
    float: left;
    width: 100%;
}

.help-info {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-style: italic;
    color: #888;
    line-height: 18px;
}

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
    outline: none;
}

input[type="radio"], input[type="checkbox"]{
    float: left;
    width: auto !important;
    margin-right: 6px;
    background: transparent;
    padding: 0;
    display: block;
    height: auto;
    height: 13px !important;
    line-height: 0 !important;
    color: transparent;
    line-height: normal;
    border: none;
}

input[type="radio"]:hover , input[type="checkbox"]:hover, input[type="radio"]:active, input[type="checkbox"]:active {
    background: transparent;
    padding: 0;
}

input:focus, input:active, textarea:focus, .search-form input:focus{
    border-color: #3FA8E2;
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -ms-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
}

form .button{
    height: 34px;
}

/* default button */
.button {
    float: left;
    margin: 0;
    padding: 4px 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #CCC;
    color: #66757F;
    line-height: 20px;
}

.button:hover {
    background: #f8f8f8;
    color: #333;
}

.button:focus, .button:active {
    outline: none !important;
}

/*----------BASIC LOGIN FORM EXTRA EDITS----------*/

.form-basic{
    position: relative;
    width: 350px;
}

.form-basic fieldset{
    border: 1px solid #ddd;
    padding: 1.11111rem;
    margin: 1rem 0;
}

.form-basic fieldset legend {
    font-size: 18px;
    font-weight: bold;
    background: #fff;
    padding: 0 0.16667rem;
    margin: 0;
    margin-left: -0.16667rem;
    width: auto;
    border-bottom: 0;
}

.form-basic label{
    margin-top: 10px;
}

.form-basic textarea{
    width: 96%;
}

.form-basic input{
    width: 96%;
    margin: 0 0 8px 0;
}

.form-basic .help-info{
    float: left;
    width: 100%;
}

.form-basic .checkbox{
    margin-bottom: 12px;
}

.form-basic .checkbox input{
    margin-right: 6px;
}

.form-basic .button{
    height: 32px;
}


		

	










	
Inline login form: Inline login form example









Example:



    
    

    

    

    
  








	
	

		

	


	

		


/*---------- STANDALONE STYLE -----------*/

form {
    float: left;
    font-family: Arial;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #444;
    line-height: 12px;
    float: left;
    width: 100%;
}

.help-info {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-style: italic;
    color: #888;
    line-height: 18px;
}

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
    outline: none;
}

input[type="radio"], input[type="checkbox"]{
    float: left;
    width: auto !important;
    margin-right: 6px;
    background: transparent;
    padding: 0;
    display: block;
    height: auto;
    height: 13px !important;
    line-height: 0 !important;
    color: transparent;
    line-height: normal;
    border: none;
}

input[type="radio"]:hover , input[type="checkbox"]:hover, input[type="radio"]:active, input[type="checkbox"]:active {
    background: transparent;
    padding: 0;
}

input:focus, input:active, textarea:focus, .search-form input:focus{
    border-color: #3FA8E2;
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -ms-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
}

form .button{
    height: 34px;
}

/* default button */
.button {
    float: left;
    margin: 0;
    padding: 4px 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #CCC;
    color: #66757F;
    line-height: 20px;
}

.button:hover {
    background: #f8f8f8;
    color: #333;
}

.button:focus, .button:active {
    outline: none !important;
}

/*----------INLINE FORM EXTRA EDITS----------*/

.form-inline{
    float: left;
}

.form-inline label {
    float: left;
    padding: 11px 0;
}

.form-inline .checkbox{
    float: left;
    width: auto;
}

.form-inline input{
    float: left;
    margin-right: 6px;
}

.form-inline button {
    float: left;
    clear: none;
    margin-left: 6px;
}


		

	










	
Simple Comment: Simple Comment form example









Example:



    
    
    

    
    

       
    

    

        
    

    


  






	
	

		

	


	

		


/*---------- STANDALONE STYLE -----------*/

form {
    float: left;
}

form textarea {
    border: 1px solid #ccc;
    padding: 6px;
    outline: none;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #444;
    line-height: 12px;
    float: left;
    width: 100%;
}

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
    outline: none;
}

input:focus, input:active, textarea:focus, .search-form input:focus{
    border-color: #3FA8E2;
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -ms-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
}

form .button{
    height: 34px;
}

/* default button */
.button {
    float: left;
    margin: 0;
    padding: 4px 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #CCC;
    color: #66757F;
    line-height: 20px;
}

.button:hover {
    background: #f8f8f8;
    color: #333;
}

.button:focus, .button:active {
    outline: none !important;
}

/*----------SIMPLE COMMENT FORM EXTRA EDITS----------*/

.form-basic {
    position: relative;
    width: 350px;
    font-family: Arial;
}

.form-basic input {
    width: 96%;
    margin: 0 0 8px;
}

.text-area label {
    margin-top: 6px;
}

.form-basic textarea {
    width: 96%;
}

.text-area textarea {
    margin-bottom: 10px;
    font-size: 13px;
    font-family: Arial;
}

.form-basic p{
    float: left;
    margin: 0;
}

.form-basic .button {
    height: 32px;
}


		

	










	
Simple Comment: Simple Comment form with require and errors









Example:



    
    
    
    This field is required
    
    
    
    This field is required
    
       
    

    

        
    

    


  






	
	

		

	


	

		


/*---------- STANDALONE STYLE -----------*/

form {
    float: left;
}

form textarea {
    border: 1px solid #ccc;
    padding: 6px;
    outline: none;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #444;
    line-height: 12px;
    float: left;
    width: 100%;
}

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
    outline: none;
}

input:focus, input:active, textarea:focus, .search-form input:focus{
    border-color: #3FA8E2;
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -ms-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
}

form .button{
    height: 34px;
}

/* default button */
.button {
    float: left;
    margin: 0;
    padding: 4px 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #CCC;
    color: #66757F;
    line-height: 20px;
}

.button:hover {
    background: #f8f8f8;
    color: #333;
}

.button:focus, .button:active {
    outline: none !important;
}

/*----------SIMPLE COMMENT FORM REQUIRE/ ERROR EXTRA EDITS----------*/

.form-basic {
    position: relative;
    width: 350px;
    font-family: Arial;
    font-size: 13px;
}

.form-basic input {
    width: 96%;
    margin: 0 0 8px;
}
.form-basic textarea {
    width: 96%;
}

.text-area label {
    margin-top: 6px;
}

.text-area textarea {
    margin-bottom: 10px;
    font-size: 13px;
    font-family: Arial;
}

.form-error {
    width: 98%;
    padding: 1%;
    background: #EE4D3B;
    color: #fff;
    float: left;
    margin-bottom: 10px;
    text-align: center;
    height: 24px;
    line-height: 23px;
}

.input-error{
    border-color: #EE4D3B !important;
}

.label-require {
    font-size: 23px;
    margin-left: 2px;
    color: #EE4D3B;
    position: relative;
    height: 10px;
    display: inline-block;
    top: 9px;
}

.form-basic p{
    float: left;
    margin: 0;
}

.form-basic .button {
    height: 32px;
}



		

	










	
Simple Comment: Validate states of inputs









Example:



    
    
    
    
    

 
	






	
	

		

	


	

		


/*---------- STANDALONE STYLE -----------*/

form {
    float: left;
}

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
    outline: none;
}

input:focus, input:active, textarea:focus, .search-form input:focus{
    border-color: #3FA8E2;
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -ms-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
}

.form-basic {
    position: relative;
    width: 350px;
}
.form-basic input {
    width: 96%;
    margin: 0 0 8px 0;
}
/*---------- VALIDATE STATES INPUT FORM EXTRA ----------*/

.input-success{
    border-color: #52AD52 !important;
}
.input-warning{
    border-color: #F3AB44 !important;
}
.input-error{
    border-color: #EE4D3B !important;
}



		

	










	
Comment Form Extra: Comment form extra example









Example:



	
    

	    

		
		
	    

	    

		
		
	    

    

	
    
    
    
       
    

    

        
    

    

  






	
	

		

	


	

		


/*---------- STANDALONE STYLE -----------*/

form {
    float: left;
}

form textarea {
    border: 1px solid #ccc;
    padding: 6px;
    outline: none;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #444;
    line-height: 12px;
    float: left;
    width: 100%;
}

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
    outline: none;
}

input:focus, input:active, textarea:focus, .search-form input:focus{
    border-color: #3FA8E2;
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -ms-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,.1);
}

form .button{
    height: 34px;
}

/* default button */
.button {
    float: left;
    margin: 0;
    padding: 4px 12px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #CCC;
    color: #66757F;
    line-height: 20px;
}

.button:hover {
    background: #f8f8f8;
    color: #333;
}

.button:focus, .button:active {
    outline: none !important;
}

/*----------COMMENT FORM EXTRA EDITS----------*/

.form-basic {
    position: relative;
    width: 350px;
    font-family: Arial;
}

.form-basic input {
    width: 96%;
    margin: 0 0 8px;
}
.form-basic textarea {
    width: 96%;
}
.text-area label {
    margin-top: 6px;
}

.text-area textarea {
    margin-bottom: 10px;
    font-size: 13px;
    font-family: Arial;
}

/* grouped form elements */

form div:first-child{
    margin-left: 0 !important;
}

form .grouped{
    float: left;
    width: 100%;
}

form .grouped .w-50{
    width: 48%;
    float: left;
    margin-left: 4%;
}

.form-basic .grouped input {
    width: 92%;
}

.form-basic p{
    float: left;
    margin: 0;
}

.form-basic .button {
    height: 32px;
}


		

	










	
Checkbox and radios: Simple checkbox and radios styles









Example:



     

     

     

  






	
	

		

	


	

		


/*---------- STANDALONE STYLE -----------*/

form {
    float: left;
    font-family: Arial;
    font-size: 13px;
}

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
    outline: none;
}

input[type="radio"], input[type="checkbox"]{
    float: left;
    width: auto !important;
    margin-right: 6px;
    background: transparent;
    padding: 0;
    display: block;
    height: auto;
    height: 13px !important;
    line-height: 0 !important;
    color: transparent;
    line-height: normal;
    border: none;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #444;
    line-height: 12px;
    float: left;
    width: 100%;
}

.checkbox, .radio {
    float: left;
    margin-bottom: 15px;
    display: block;
    width: 100%;
}


		

	










	
Checkbox and radios: Inline checkboxes and radios









Example:

	


	
Inline checkboxes:






    

    

    






Inline radios:






    

    

    







 
	






	
	

		

	


	

		


/*---------- STANDALONE STYLE -----------*/

form {
    float: left;
    font-family: Arial;
    font-size: 13px;
}

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
    outline: none;
}

input[type="radio"], input[type="checkbox"]{
    float: left;
    width: auto !important;
    margin-right: 6px;
    background: transparent;
    padding: 0;
    display: block;
    height: auto;
    height: 13px !important;
    line-height: 0 !important;
    color: transparent;
    line-height: normal;
    border: none;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #444;
    line-height: 12px;
    float: left;
    width: 100%;
}

.checkbox, .radio {
    float: left;
    margin-bottom: 15px;
    display: block;
    width: 100%;
}

/*----------INLINE CHECKBOXES-RADIOS EXTRA EDITS----------*/
.inline {
    float: left;
    display: inline !important;
    width: auto !important;
    margin-right: 10px;
}

.help-info {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-style: italic;
    color: #888;
    line-height: 18px;
}


		

	










	
Selects: Selects - Dropdowns









Example:


	
    

        
    
    

    

        
    

    
    

        
    

    

	
	






	
	

		

	


	

		



/*---------- STANDALONE STYLE -----------*/

form {
    float: left;
}

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
    outline: none;
}

form .grouped {
    float: left;
    width: 100%;
    margin: 6px 0;
}

/* selects */
select, .select, .multi-select, .select_number{
    width: 100%;
    border: 1px solid #ccc;
    padding: 6px;
    margin-bottom: 10px;
    outline: none;
}
.select-number {
    width: 95%;
}


		

	










	
Custom Inputs Simple custom inputs









Example:

	


	


    Input prepend

    

	@
	
    






    Input append

    

	
	.99
    
 






    Input prepend + append

    

	$
	
	.99
    
 





	






	
	

		

	


	

		



/*---------- STANDALONE STYLE -----------*/

form {
    float: left;
    font-family: Arial;
    font-size: 13px;
}

input {
    display: inline-block;
    height: 20px;
    padding: 6px;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    border: 1px solid #ccc;
    float: left;
    outline: none;
}

form .grouped {
    float: left;
    width: 100%;
}

/* custom inputs */
.prepend, .append,   .prepend-append{
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.add-on, .add-to {
    float: left;
    margin: 0px;
    padding: 4px 12px;
    background: #fff;
    border: 1px solid #CCC;
    color: #66757F;
    line-height: 24px;
    height: 24px;
}

.prepend .add-on, .prepend-append .add-on{
    border-right: 0 !important;
}

.append .add-to, .prepend-append .add-to{
    border-left: 0 !important;
}

.help-info {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-style: italic;
    color: #888;
    line-height: 18px;
}