css for input style

input-style.css

/* object labels
----------------------------------*/
div.input .values label {
    margin: 0px;
    border: 2px solid transparent; /* for consistency use same border as input (but transparent) */
    padding: 2px 2px;
    width: 150px;
    
    display: block;
    float: left;    
}



/* object inputs
----------------------------------*/
div.input .values input {
    margin: 0px;
    padding: 2px 2px;
    width: 150px;
    box-sizing: border-box;
}



/* object selects
----------------------------------*/
div.input .values select {
    margin: 0px;
    padding: 2px 0px;
    width: 150px;
}



/* object inputs type="radio" and type="checkbox"
----------------------------------*/
div.input .values input[type="radio"],
div.input .values input[type="checkbox"] {
    height: 15px;
    width: 16px;
    margin: 4px; /* for consistency use margin + border + padding from input */
    margin-top: 5px; /* for consistency use margin + border + padding from input */
    border: 0px; /* has no effect since there is no content, therefore set margin instead */ 
    padding: 0px; /* has no effect since there is no content, therefore set margin instead */
    
    display: block;
    float: left;    
}
div.input .values input[type="radio"] + label,
div.input .values input[type="checkbox"] + label {
    width: 110px;
    margin: 0px;
    border: 2px solid transparent; /* for consistency use same border as input (but transparent) */
    padding: 2px 2px;
    
    display: block;
    float: left;
}



/* "Standard Inputs"-object styles
----------------------------------*/
/* no specific styles, general styles from General "Input"-object styles will be used  */



/* "Standard Inputs"-object styles
----------------------------------*/
/* no specific styles, general styles from General "Input"-object styles will be used  */




/* "Time Related"-object styles
----------------------------------*/
/* input minute */
div.input.minute .values input.minute {
    width: 24px;
    text-align: right;
}
/* input hour */
div.input.hour .values input.hour {
    width: 24px;
    text-align: right;
}
/* input hourminute */
div.input.hourminute .values input.minute,
div.input.hourminute .values input.hour {
    width: 24px;
    text-align: right;
}
/* input day */
div.input.day .values input.day {
    width: 24px;
    text-align: right;
}
/* input dayhourminute */
div.input.dayhourminute .values input.minute,
div.input.dayhourminute .values input.hour,
div.input.dayhourminute .values input.day {
    width: 24px;
    text-align: right;
}
div.input.dayhourminute .values {
    width: 200px !important;
}
/* input time */
div.input.time .values input.time {
    width: 44px;
}
/* input timerange */
div.input.timerange .values input.time {
    width: 44px;
}




/* "Date Related"-object styles
----------------------------------*/
/* input week */
div.input.week .values input.week {
    width: 24px;
    text-align: right;
}
/* input weekrange */
div.input.weekrange .values input.week {
    width: 24px;
    text-align: right;
}
/* input date */
div.input.date .values input.date {
    width: 74px;
}
/* input daterange */
div.input.daterange .values input.daterange {
    width: 150px;
}



/* jquery validation error message style
/* see http://bassistance.de/jquery-plugins/jquery-plugin-validation/
--------------------------------------------------------------------------*/
input.error {
    background: #F8DBDB;
    border-color: #E77776;
    border-style: solid;
}
label.error {
    color: #E46C6E;
    font-style: italic;    
    
    display: block;      
    float: left;
    clear: both;
}