jquery.form.css

/**
 * error message
 */
input.invalid{
	outline:1px solid gold;
}

div.errormsg{
    padding:5px;
    position:absolute;
    display:inline-block;
    color:black;
    font-size:14px;
    margin:0;
    margin-left:10px;
    font-weight:normal;
    background-color:white;
    border:1px solid black;
    border-radius:5px;
    box-shadow:5px 5px 5px rgba(0,0,0,0.5);
    z-index:1;
}
	div.errormsg:before,div.errormsg:after{
		position:absolute;
		left:-10px;
		bottom:5px;
		content:" ";
		width:0;
		height:0;
		padding:0;
		border:10px solid transparent;
		border-width:8px 10px;
		border-right-color:inherit;
		border-left-width:0;
	}
	div.errormsg:after{
		border-right-color:white;
		left:-8px;
	}

input.invalid + div.errormsg{

}
/**
 * Color
 */
input[type=color],input[data-type=color]{

}
/**
 * Datalist
 */
div.datalist{
	display:none;
	position:absolute;
	background-color:white;
	border:1px solid gray;
}
input.datalist + div.datalist{
	display:block;
}
	div.datalist ul{
		margin:5px;
		padding:0;
	}
		div.datalist ul li{
			list-style:none;
			padding:5px;
		}
		div.datalist ul li:hover, 
		div.datalist ul li.hover{
			text-decoration:underline;
			background-color:#efefef;
		}
datalist select{
	display:none;
}
/*************************
 * Calendar
 *************************/
div.date{
	display:inline-block;
	color:white;
}
	div.date div{
		background:blue;
		position:absolute;
		width:auto;
		box-shadow:0 0 10px black;
		border-radius:5px;
	}
		div.date table{
			border-collapse: collapse;
			border-spacing: 0;
			margin-bottom: 20px;
			width:100%;
			width:auto;
			margin:10px;
		}
			div.date table caption{
				background:inherit;
				width:inherit;
				text-align:center;
				margin-bottom:10px;
			}
				div.date table caption .current{
					margin:0;
					text-align:center;
					display:inline-block;
					box-sizing:border-box;
					-moz-box-sizing:border-box;
					font-weight:bold;
				}
				div.date table caption a{
					float:left;
					text-align:left;
				}
				div.date table caption span + a{
					float:right;
					text-align:right;
				}
			div.date table th,
			div.date table td{
				text-align:center;
				border: 1px solid #99CCFF;
				border: 1px solid rgba(255,255,255,0.3);
				padding:0;
			}
			div.date table td{
				padding:0 6px;
			}
			div.date td.selected{
				background:#99CCFF;
			}

				div.date a{
					color:inherit;
					text-decoration:none;
				}

/********************************
 * FORM
 * jquery.form.css
 ********************************/


/* normalize */
form{
    margin:0;
    padding:0;
}

    /********************************
     * Normal elements
     ********************************/
		
	form label.required:after{
	    content:" *";
	}

/**
 * input[type=number] 
 */
input.number{
	margin-right:0;
	padding-right: 22px;
}
span.number{
	margin-right: 32px;
	margin-left: -20px;
	display:inline-block;
	vertical-align:middle;
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
	}
	span.number span{
		border:10px solid transparent;
		border-width:10px 5px;
		display:block;
		width:0;
		height:0;
		margin:2px;
		border-bottom-width:0;
		border-bottom-color:#555555;
		border-top-color:#555555;
	}
	span.number span:hover{
		border-bottom-color:black;
		border-top-color:black;
	}
	span.number :first-child{
		border-bottom-width:10px;
		border-top-width:0;
	}

/*************************
 * Placeholder
 *************************/
   	input.placeholder,
   	textarea.placeholder{
   		color:#bbb;
	}


.predict{
	position:relative;
	display:inline-block;	
}
	.predict-input{
		position:relative;
		background-image:transparent;
	}

	.predict-input:focus{
		opacity:0.8;
	}

	.predict-hint{
		position:absolute;
	}

	.predict-list{
		position: absolute;
		background-color: white;
		box-shadow:2px 2px 10px black;
		border-radius:5px;
		width:100%;
		box-sizing:border-box;
		padding: 0;
		margin: 0;
		left:0;
		font-size: inherit;
		display:none;
		z-index:1;
	}
		.predict-list > *{
			display:none;
		}

		.predict-list-item{
			padding:5px 20px;
			display:block;
			cursor:pointer;
			border-bottom:1px solid #ddd;
		}
		.predict-list-item-hover{
			text-decoration:underline;
		}


	.predict-input:focus + .predict-list,
	.predict-list:focus{
		display:block;
	}
/*************************
 * type.range
 *************************/
	input.range{
		padding-bottom:-20px;
		border:0;
		cursor:pointer;
		color:transparent;	
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+kAAAAeCAYAAABQQl9DAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADscAAA7HATiSL3YAAAO9SURBVHhe7d0xbttAEAVQKmlTBCl8AQcQYMG5i3MTnkQQoKvEN1GhQpFvEANJI5MUQ6pJxXUZzOwTwMrN/DcLGB+iyKbxIUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBP4JrGAQIECAAAEC8QT2+33fdd3Hdyb/1bbtl3jpTEyAAAECBOoVUNLr3b3kBAgQIBBYYLvdjt+fnhYTXC6X1x/Pz91U0u8CxzQ6AQIECBCoTuBDdYkFJkCAAAECSQSGYWiWrn76mw8BAgQIECAQT0BJj7czExMgQIAAgZvAXMSXrrm8+xAgQIAAAQLxBJT0eDszMQECBAgQuAkMfb98KelOCQECBAgQCCmgpIdcm6EJECBAgMBU0gu3u1+VdEeEAAECBAiEFFDSQ67N0AQIECBAoFzSh+sVEQECBAgQIBBQQEkPuDQjEyBAgACBWaCfbndfuoaug0SAAAECBAgEFFDSAy7NyAQIECBAYBYoPt3dN+kOCQECBAgQCCmgpIdcm6EJECBAgIDfpDsDBAgQIEAgo4CSnnGrMhEgQIBAFQKlV7B5T3oVR0BIAgQIEEgooKQnXKpIBAgQIFCHQPHp7m53r+MQSEmAAAEC6QRWu91uvPpHnm6xAhEgQIBAfoFvj4+LIS9vb83xeMyPICEBAgQIEEgmsNput+Nms0kWSxwCBAgQIJBb4HA4NJuHh8WQ8+3up9OpWa/XuSGkI0CAAAECyQTmkv57yvQpWS5xCBAgQIBAeoFSAe+mb9J/ns/pDQQkQIAAAQLZBFbZAslDgAABAgRqEJjvhPt6f78Ydfq9+uv55aVr2/auBg8ZCRAgQIBAFgEPjsuySTkIECBAoDqB0oPj5r/5ECBAgAABAvEElPR4OzMxAQIECBC4CZRewTZ4KKxTQoAAAQIEQgoo6SHXZmgCBAgQINA0pW/S+75HRIAAAQIECAQUUNIDLs3IBAgQIEBgFvCedOeAAAECBAjkE1DS8+1UIgIECBCoRGCYvi0vXZUwiEmAAAECBFIJKOmp1ikMAQIECNQk4DfpNW1bVgIECBCoRUBJr2XTchIgQIBAOgFPd0+3UoEIECBAgECjpDsEBAgQIEAgqMD8cLilyyvYgi7V2AQIECBQvYCSXv0RAECAAAECUQU83T3q5sxNgAABAgSWBZR0p4MAAQIECAQVcLt70MUZmwABAgQIFASUdMeDAAECBAjEFPjzzivYPo/jOMSMZmoCBAgQIECAAAECBAgQIECAAAECBAgQIPCfBf4CXCs3jGOIZn4AAAAASUVORK5CYII=) no-repeat center center;
	}