This article describes how to change the look and feel of the forms created with the SharePoint Form Web Part using CSS.
A SharePoint form usually looks like this:
The SharePoint Form Web Part allows you to change the layout from two columns to two rows, so that the field name is displayed directly above the input control. Other modifications can be achieved using CSS.
Sample 1:
/*border and background of the form*/ TABLE.ms-formtable { BORDER: #a4a4a4 1px solid; BACKGROUND-COLOR: #f2f2f2; } TABLE.ms-formtable TD.ms-formbody { background-color:transparent; } /*padding from the top*/ TABLE.ms-formtable > TBODY > TR:first-child > TD { PADDING-TOP: 20px !important } /*cells*/ TABLE.ms-formtable > TBODY > TR > TD { BORDER: 0px; PADDING: 3px 10px; } /*inputs*/ TABLE.ms-formtable INPUT[type='text'], TABLE.ms-formtable TEXTAREA, TABLE.ms-formtable SELECT { BORDER: #c8c8c8 1px solid; } /*focused inputs*/ TABLE.ms-formtable INPUT[type='text']:focus, TABLE.ms-formtable TEXTAREA:focus, TABLE.ms-formtable SELECT:focus { BORDER: #a4a4a4 1px solid; }
/*border and background of the form*/
TABLE.ms-formtable { BORDER: #a4a4a4 1px solid; BACKGROUND-COLOR: #f2f2f2; }
TABLE.ms-formtable TD.ms-formbody { background-color:transparent; }
/*padding from the top*/
TABLE.ms-formtable > TBODY > TR:first-child > TD { PADDING-TOP: 20px !important }
/*cells*/
TABLE.ms-formtable > TBODY > TR > TD { BORDER: 0px; PADDING: 3px 10px; }
/*inputs*/
TABLE.ms-formtable INPUT[type='text'], TABLE.ms-formtable TEXTAREA, TABLE.ms-formtable SELECT { BORDER: #c8c8c8 1px solid; }
/*focused inputs*/
TABLE.ms-formtable INPUT[type='text']:focus, TABLE.ms-formtable TEXTAREA:focus, TABLE.ms-formtable SELECT:focus { BORDER: #a4a4a4 1px solid; }The form will now look like this:
Sample 2:
/*border and background of the form*/ DIV.ms-WPBody { BORDER: #000 1px solid; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; BACKGROUND-COLOR: #fff; padding:10px;} TABLE.ms-formtable { BACKGROUND-COLOR: #fff; } /*font-color*/ TABLE.ms-formtable, TABLE.ms-formtable TD { color: #000 !important; } TABLE.ms-formtable TD.ms-formbody { background-color:transparent; } TABLE.ms-formtable, TABLE.ms-formtable TD, TABLE.ms-formtable INPUT { FONT-FAMILY: Arial } TABLE.ms-formtable > TBODY > TR:first-child > TD { PADDING-TOP: 20px !important } TABLE.ms-formtable > TBODY > TR > TD { BORDER: 0px; PADDING: 3px 10px; } /*inputs*/ TABLE.ms-formtable INPUT[type='text'], TABLE.ms-formtable TEXTAREA, TABLE.ms-formtable SELECT { BORDER: #000 1px solid; background-color:#DFDFDF; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; padding:3px; }
/*border and background of the form*/
DIV.ms-WPBody { BORDER: #000 1px solid; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; BACKGROUND-COLOR: #fff; padding:10px;}
TABLE.ms-formtable { BACKGROUND-COLOR: #fff; }
/*font-color*/
TABLE.ms-formtable, TABLE.ms-formtable TD { color: #000 !important; }
TABLE.ms-formtable TD.ms-formbody { background-color:transparent; }
TABLE.ms-formtable, TABLE.ms-formtable TD, TABLE.ms-formtable INPUT { FONT-FAMILY: Arial }
TABLE.ms-formtable > TBODY > TR:first-child > TD { PADDING-TOP: 20px !important }
TABLE.ms-formtable > TBODY > TR > TD { BORDER: 0px; PADDING: 3px 10px; }
/*inputs*/
TABLE.ms-formtable INPUT[type='text'], TABLE.ms-formtable TEXTAREA, TABLE.ms-formtable SELECT { BORDER: #000 1px solid; background-color:#DFDFDF; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; padding:3px; }The Form will now look like this:
