bootstrap 3 easy form styling

_form.less

/* juste add the class defaultForm to the form Element*/

.defaultForm {
	input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]):not([type="reset"]),
	textarea,
	select {
		display: block;
		width: 100%;
		
		.form-control;

		&.parsley-error, 
		&.error {
			border-color: #f00;
			background-image: url("@{basePath}Images/error.svg");
			background-position: right 10px center;
			background-repeat: no-repeat;
			& + ul {	
				color: #f00;
				padding: 0;
				 li {
				 	.list-inline;
					margin-left: 15px;
				 }
			}
		}


	}

	fieldset {

		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
		
		&:not(.inline) {
			input[type=radio], input[type=checkbox] {
				+ label {
					display: block;
				}
			}
		}
		margin-bottom: @form-group-margin-bottom; 
	}
	
	input[type=radio], input[type=checkbox] {
		
		display: none;
		

		+ label {
			background-image: url("@{basePath}Images/checkbox.svg");
			background-position: left top;
		    padding-left: 25px;
			background-position: left 4px;
			background-repeat: no-repeat;
			cursor: pointer;
			margin-right: 5px;
		}
		
		
		&:checked + label {
			background-image: url("@{basePath}Images/checkbox-check.svg");
		}
		
	}
	input[type=radio] + label {
		background-image: url("@{basePath}Images/radio.svg");
	}
	input[type=radio]:checked + label {
		background-image: url("@{basePath}Images/radio-check.svg");
	}
	
	select {

		&:not([multiple]){
			background-image: url("@{basePath}Images/arrow.svg");
			background-position: right 15px center;
			background-repeat: no-repeat;
			padding-right: 35px;

		}

		&[multiple] {
			height: auto;
			
		}

		-moz-appearance: none;

		&::-ms-expand {
			display: none;
		}
	}
	
	textarea { 
		resize: vertical; 
		min-height: 150px;
		
	}
	
	input[type=submit] {
		.btn;
		.btn-primary;
		width: 100%;
		margin-bottom: @form-group-margin-bottom; 
	}
	input[type=reset] {
		.btn;
		.btn-default;
		width: 100%;
		margin-bottom: @form-group-margin-bottom; 
	}
	

	input[type=file] {
		display: none;
		
		+ label{
			position: relative;
			width: 100%;
			height: 25px;
			
			margin-bottom: @form-group-margin-bottom + @input-height-base; 
			cursor: pointer;
			
			&:after {
				content: "Upload";
				.btn;
				.btn-primary;
				width: 80px;
				right: 0;
				position: absolute;
				margin-top: 25px;
			}
			
			&:before {
				content: attr(date-filename);
				.form-control;
				
				
				position: absolute;
				top: 0;
				width: 100%;
				width:calc(~'100% - 110px');
				left: 0;
				overflow: hidden;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 25px;
				
			}
		}
	}
	
	.input-group {
		margin-bottom: @form-group-margin-bottom; 

		input, .input-group-btn {
			margin-bottom: 0 !important;
		}
	}
	
}

.form-control {
	margin-bottom: @form-group-margin-bottom; 

	-webkit-appearance: none;

	&:disabled {
		//opacity: 0.5;
	}
	

}

arrow.svg

checkbox-check.svg

checkbox.svg

radio-check.svg

<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="16" width="16" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <ellipse ry="6" rx="6" id="svg_1" cy="7" cx="7" stroke-width="1.5" stroke="#000" fill="#fff"/>
  <ellipse ry="2" rx="2" id="svg_3" cy="7" cx="7" stroke-width="1.5" stroke="#000" fill="#000000"/>
 </g>
</svg>

radio.svg

Full code on :
https://github.com/Megafry/prototyp14