Inputs

Text Field



Disabled



Error


Invalid email address

Tableau inputs



input {
	border: 1px solid #95A5A6;
	height: 28px;
	border-radius: 0;
	font-size: 13px;
	padding: 0 10px;
	line-height:  28px;
	min-width:  100px;
	color: #000;
	}
label {
	font-size: 13px;
	padding-right: 10px;
	color: #000;
	}
input:hover, input:focus {
        border: solid #2980bf 1px;
	box-shadow: 0 0 5px #9dd8ff;
	}
input:disabled {
	background: #efefef;
	color: #667a7b;
	}
.inputError {
	border: solid 1px #E74B3B;
	}
.inputError span {
	color: #E74B3B;
	font-size: 12px;
        }
.inputError input:hover, .inputError input:focus {
        border: solid 1px #E74B3B;
	box-shadow: 0 0 6px 0 rgba(231,76,59,0.35);
	}

Checkbox



Disabled


.checkBox {
	border: 1px solid #95A5A6;
	background: #fff;
	height: 14px;
	width: 14px;
	font-size: 13px;
	padding-left: 22px;
	line-height: 16px;
	width: 14px;
	}
.checkBox:hover {
	background: #fff;
	border: 1px solid #2980B9;
	box-shadow: 0 0 5px #9dd8ff;
	}
.checkBox-checked {
	background: #2980B9;
	}
.checkBox-disabled{
	background: #efefef;
	border: 1px solid #95A5A6;
	}	
	

Radiobutton



Disabled


.radioBtn {
	background: #fff;
	border: solid 1px #95A5A6;
	height: 14px;
	width: 14px;
	font-size: 13px;
	padding-left: 22px;
	line-height: 16px;
	border-radius: 50px;
	}
.radioBtn-checked {
	background: #fff;
	border: solid 1px #2980B9;
	}
.radioBtn:after {
	top: 2px;
	left: 2px;
	width: 8px;
	height: 8px;
	border-radius: 50px;
	background: #2980B9;
	}
.radioBtn:hover {
	background: #fff;
	border: 1px solid #2980B9;
	box-shadow: 0 0 5px #9dd8ff;
	}
.radioBtn-disabled{
	background: #efefef;
	border: 1px solid #95A5A6;
	}	
	

Dropdown

Please Select

Disabled


Please Select
option {
	background: #fff;
	border: solid 1px #d8d8d8;
	line-height: 28px;
	font-size: 13px;
	padding: 0 23px 0 10px;
	box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
	}
select.disabled {
	color: #667a7b;
	background: #efefef;
	}
	

Textarea

Disabled

Error


Maximum limit
textarea{
	border: 1px solid #95A5A6;
	padding: 10px;  
	font-size: 13px;
	}
textarea:disabled{
	color: #b5c6d6;
	background: #efefef;
	}
textarea.error {
	border: solid 1px #E74B3B;
	}
textarea.error span {
	color: #E74B3B;
	font-size: 12px;
    }