Pre-Defined CSS Classes for Forms

Change border width by 1px and color to green, curve corner border by 10px, padding to increase space inside label, background color to white, text color to blue, font family to Times New Roman, text size to 14px, align text in the center.

.MyLabel
{
        border: 1px solid green;
    Border-radius: 10px;    
   padding: 5px 10px 5px 10px;
    Background : white;
    color: blue; 
    font-family: times new roman;
    font-size: 14px;
   text-align: center;
}

/* OR */

.form-surface-view .silverLabel
{
    border: 1px solid green;
    Border-radius: 10px;    
    padding: 5px 10px 5px 10px;
    background: White;
   color: blue; 
    font-family: times new roman;
    font-size: 14px;
   Text-align: center;
}

Curve corner border by 10px, text to bold, background-color to aqua, font color to black, change border width by 1px, solid and color to yellow, font-size set the size to text, increase transparent by 0.5.

.MyButton
{
    border-radius: 10px;
    font-weight: bold;
    background-color: aqua;     
   color: black;
    border: 1px solid yellow;   
    font-style: italic;
    font-size: 14px;
    opacity: 0.5;
}


/* .MyButton:hover - To change background-color to light yellow and text to blue color. */

.MyButton:hover
{
        background-color: #ffffcc; /*light yellow*/
     color: blue;
}

/* OR */

.form-surface-view .buttonControl
{
    border-radius: 10px;
    font-weight: bold;
    background-color: aqua;     
    color: black;
    border: 1px solid yellow;   
    font-style: italic;
    font-size: 14px;
    opacity: 0.5;
}

.form-surface-view .buttonControl:hover
{     
    background-color: #ffffcc; /*light yellow*/
    color: blue;
} 

Change border to width by 1px solid color to black, the background to red, font-style to italic, font to bold,  font-family to Times New Roman, Text color to white, curve border corner by 10px.

.MyCloseButton
{
border: 1px solid black;
    background: red !important;
font-style: italic;
font-weight: bold;
font-family: times new roman;
    color: white;
border-radius: 10px;
}

/* OR */

.form-surface-view .SilverButtonStyle input[type="button"]
{
        border: 1px solid black;
    background: red !important;
font-style: italic;
font-weight: bold;
font-family: times new roman;
    color: white;
border-radius: 10px;
}

Change background color to light blue, font style to normal, font to bold, font color to black, underline to text,height to 25px, width to 100px.

.MyLinkButton
{
    background: #99ccff; /*Light Blue*/
font-style: normal;
font-weight: bold;
color: black;
   text-decoration: underline;
   height: 25px;
   width: 100px;
}

/* OR */

.form-surface-view .SilverHyperLinkButtonStyle .buttonControl
{
    background: #99ccff; /*Light Blue*/
font-style: normal;
font-weight: bold;
color: black;
   text-decoration: underline;
   height: 25px;
   width: 100px;
}

Place the image in button background of specified Url, Height 163 px and Width: 300px and background image will not repeat, curve corner border by 10px.

.MyImage
{
        background-repeat: no-repeat;
        width: 300px;
        height: 163px;
        border: 2px solid black;
        border-radius: 10px;
}

/* OR */

.form-surface-view img
{
        background-repeat: no-repeat;
        width: 300px;
        height: 163px;
        border: 2px solid black;
        border-radius: 10px;
}

/* MyNavigationTree: Curve corner border by 5px, border width to 2px solid, and color to black. */

.MyNavigationTree
{
        border-radius: 5px;
    border: 2px solid black; 
}

/* OR */

.form-surface-view .Commonscroll
{
  border-radius: 5px;
  border: 2px solid black; 
}


/* MyNavigationText: font family to Times New Roman, font size to 14px, font style to normal. */

.MyNavigationText
{
        font-family: times new roman; 
        font-size: 14px;
        font-style: normal;
}

/* OR */

.form-surface-view .jstree-no-icons li
{
        font-family: times new roman; 
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: black;
}


/* MyNavigationText : Hover 
      Increase font size to 16px, font style to bold , font family to Arial. */

.MyNavigationText:hover
{
    font-size: 16px;
    font-style: bold;
    font-family: arial;
}

/* OR */

.form-surface-view .jstree-no-icons .jstree-leaf :hover
{
    font-size: 15px;
font-weight: bold;
}

/* .MyTagEditorControlCss: Change Border width to 2px solid and green color, font family to Times New Roman, font size to 14px, background color to white and text to black. */

.MyTagEditorControlCss
{
    border: 2px solid green;
    font-family: times new roman;
    font-size: 14px;
    background-color: white;
    color: black;  
}

/* OR */

.form-surface-view .compactTagView
{
    border: 2px solid green;
    font-family: times new roman;
    font-size: 14px;
    background-color: white;
    color: black;  
}

/* .MyTagEditorTextBoxCss - Change background color to little yellow, text color to black, size to 16px, font style to normal, font family to Times New Roman, font to bold. */

.MyTagEditorTextBoxCss
{
    background-color: #ffffe6;/*light yellow*/
    color: black;
    font-size: 16px;
    font-style: normal;
   font-family: times new roman;
   font-weight: bold;
}

/* OR */

.form-surface-view .blinktext 
{
    background-color: #ffffe6;/*light yellow*/
    color: black;
    font-size: 16px;
    font-style: normal;
   font-family: times new roman;
   font-weight: bold;
}


/* .MyTagEditorButtonCss - Change border width by 1px  solid and color to blue, background color to grey, text size to 14px, text color to black, curve corner border by 3px. */

.MyTagEditorButtonCss
{
    border: 1px solid blue;
    background-color: grey;
    color: black;
    font-size: 14px;
    border-radius: 3px;
}

/* OR */

.form-surface-view .compact-tag-view-drop-down-arrow
{
    border: 1px solid blue;
    background-color: grey;
    color: black;
    font-size: 14px;
    border-radius: 3px;
}


/* .MyTagEditorDropDownListCss - Change border width to 1px solid & black color, font style Times New Romen, font size to 16px, font to bold. */

.MyTagEditorDropDownListCss
{
        border: 1px solid black;
   font-family: times new roman;
  font-size: 14px;
font-weight: bold;
}

/* OR */

.form-surface-view .compactTagSuggestions
{
border: 1px solid black;
   font-family: times new roman;
  font-size: 14px;
        font-weight: bold;
}

/* MyApprovalChainEditor  CSS to change border width to 1px & black, background color to green, text color to white, text size to 16px. */

.MyApprovalChainEditorButton
{
   border: 1px groove black;
    background-color: green;
  color: white;
  font-size: 16px;
        font-style: normal;
}

/* .MyApprovalChainEditorAdvanceLink - Change text size to 14px, text style to italic, text family to serif, underline the text, text color to grey. */

.MyApprovalChainEditorAdvanceLink
{
font-size: 14px;
  font-style: italic;
    font-family: serif;
    text-decoration: underline;
        color: grey;
}

/* OR */

.form-surface-view .SilverHyperlinkButtonadvance
{
        font-size: 14px;
  font-style: italic;
    font-family: serif;
    text-decoration: underline;
    color: grey;
}



/* .MyApprovalChainEditorList - Change font family to Courier New, background color to light pink, Add spacing inside list of 3px, add space left side outside component.
Add space of 25px to left side of list. */

.MyApprovalChainEditorList
{
        font-family: courier new;
background-color: #ffe5e5;   
     padding: 3px;
    margin-left: 25px;
}

/* OR */

.form-surface-view .Approval-list
{
        font-family: courier new;
background-color: #ffe5e5;   
     padding: 3px;
    margin-left: 25px;
}


/* .MyApprovalChainDropDownButton - Change background color to orange, text size to 14px. */

.MyApprovalChainDropDownButton
{
        background-color: orange;
    font-size: 14px;
}

/* OR */

.form-surface-view .common-dropdown-Arrow
{
        background-color: orange;
    font-size: 14px;
}



/* .MyApprovalChainDropDownList - Change background to white color, text size to 18px, text style to italic, cursor to pointer, text color to aqua. */

.MyApprovalChainDropDownList
{
        background-color: white;
    font-size: 18px;
    font-style: italic; 
   cursor: pointer;
    color: aqua;
}

/* OR */

.form-surface-view .Combo-list-sub
{
        background-color: white;
    font-size: 18px;
    font-style: italic; 
    cursor: pointer;
    color: aqua;
}

/* .MyApprovalChainDropDownTextBox - To change background color to light blue, text color to black, text size to 18px, text style to normal. */

.MyApprovalChainDropDownTextBox
{
        background-color: #6da0f2;
    color: black;
    font-size: 18px;
    font-style: normal;     
}

/* OR */

.form-surface-view .common-dropdown label
{
        background-color: #6da0f2;
    color: black;
    font-size: 14px;
    font-style: normal; 
}

MyTextbox CSS to change the border to none, background color to white, text color to black, text size 14px, add light blue shadow to sides of the textbox.

.MyTextbox
{
        border: none;
    background-color: white;
    color: black;
    font-size: 14px;
    font-style: normal;    
    box-shadow: 0 0 7px #198be5;
}

/* OR */

.form-surface-view .silvertextbox input
{
        border: none;
    background-color: white;
    color: black;
    font-size: 14px;
    font-style: normal;    
    box-shadow: 0 0 7px #198be5;
}

Change border width to 2px and color to light yellow, curve corner border by 7px, background color to orange, add light blue box-shadow at sides.

.MyPasswordTextbox
{
        border: 2px groove #ffffcc; /*light Yellow*/
border-radius: 7px;
background-color: orange;
box-shadow: 0 0 10px #198be5;
}

/* OR */

.form-surface-view .password-box
{
        border: 2px groove #ffffcc; /*light Yellow*/
border-radius: 7px;
background-color: orange;
box-shadow: 0 0 10px #198be5;
}

Change curve corner border by 10px, text family to Times New Roman,text size to 14px, width to 250px.

.MyMaskedTextbox
{
        border-radius: 10px;
    font-family: times new roman;
    font-size: 14px;    
   width: 250px;
}

/* OR */

.form-surface-view .passwordBox
{
        border-radius: 10px;
    font-family: times new roman;
    font-size: 14px;    
    width: 250px;
}

/* MyDatePicker CSS to change border width to 1px and  color to light yellow, curve corner border by 12px. */

.MyDatePicker
{
        border: 1px solid #ffffcc;
    Border-radius: 12px;
}

/* OR */

.form-surface-view .calendar
{
        border: 1px solid #ffffcc; /*light yellow*/
    border-radius: 12px;
}

/* .MyDatePickerTextbox - Change text color to blue, text size to 16px, text style to normal, width to 125px. */

.MyDatePickerTextbox
{
        color: #6666ff; 
    font-size: 16px;
    font-style: normal;
    width: 125px;
}

/* OR */

.form-surface-view .datePickerInput
{
        color: #6666ff;
    font-size: 16px;
    font-style: normal;
    width: 125px;
}

/* .MyDatePickerButton - To change border width to 1px solid and color to black, curve the border by 5px. */
.MyDatePickerButton
{
        border: 1px solid black;
border-radius: 2px;
}

/* OR */

.form-surface-view .silverdatePickerIcon
{
        border: 1px solid black;
border-radius: 2px;
}

Curve corner border by 12px, add space between radio button by 5px, add space outside radio button, and background color to yellow.

.MyRadioButtonList
{
        border-radius: 12px;
    margin-bottom: 6px;
padding: 5px;  
    background-color: yellow;
}

/* OR */

.form-surface-view .SilverRadioButtonsControl
{
        border-radius: 12px;
    margin-bottom: 6px;
    padding: 5px;  
    background-color: yellow;
}

Change font family to Times New Roman and size to 14px, text style to normal, border width to 1px solid, curve corner border by 5px.

.MyListBox
{
        font-family: times new roman;
    font-size: 14px;
    font-style: normal;
    border: 1px solid;
    border-radius: 5px;
}

/* OR */

.form-surface-view .SilverLinkList li
{
        font-family: times new roman;
    font-size: 14px;
    font-style: normal;
    border: 1px solid;
    border-radius: 5px;
}

/* .MyDropDownListControl: Change border width to 1px solid and color to black, curve corner border by 5px. */

.MyDropDownListControl 
{
        border: 1px solid black;
    border-radius: 5px;
}

/* OR */

.form-surface-view .commondropdown
{
        border: 1px solid black;
        border-radius: 5px;
}

/* MyDropDownList - Change background color to shade of green, text size to 18px, text style to normal, change cursor icon to pointer, text color to aqua. */
 
.MyDropDownList
{
        background-color: #ccffcc;
  font-size: 18px;
  font-style: normal; 
  cursor: pointer;
    color: aqua;
}

/* OR */

.form-surface-view .Combo-list-sub
{
        background-color: #ccffcc;
    font-size: 18px;
    font-style: normal; 
    cursor: pointer;
    color: aqua;
}


/* .MyDropDownListTextbox - To change background color to white, text color to black, text size to 14px, text style to normal, remove border and add shadow of blue color. */

.MyDropDownListTextbox
{
        border: none;
        background-color: white;
    color: black;
   font-size: 14px;
    font-style: normal;    
    box-shadow: 0 0 7px #198be5;
}

/* OR */

.form-surface-view .commondropdowninput input
{
        border: none;
    background-color: white;
    color: black;
    font-size: 14px;
    font-style: normal;
    box-shadow: 0 0 7px #198BE5;
}


/* .MyDropDownListButton - To change background color to shade of green, text color to aqua, remove border and add shadow of blue color. */
 
.MyDropDownListButton
{
        border: none;
    background-color: #ccff99;
    color: aqua;
        box-shadow: 0 0 10px #198be5;
}

OR

.form-surface-view .common-dropdown-Arrow
{
        border: none;
background-color: orange;
font-size: 14px;
}

Change border width to 1px and color to black, curve corner border by 9px, add space two check box, text family to Courier New, text size to 14px, background color to a shade of yellow.

.MyCheckBoxList
{
        border: 1px solid black;
border-radius: 9px;
padding: 5px;
font-family: courier new;
font-size: 14px;
background-color: #ffffcc;
}

/* OR */

.form-surface-view .SilverCheckBoxList
{
        border: 1px solid black;
border-radius: 9px;
padding: 5px;
font-family: courier new;
font-size: 14px;
background-color: #ffffcc;
}

/* MyLinkListItem CSS to change background color to light grey, add space between two link list item. */

.MyLinkListItem
{
background-color: #e6e6e6;
        padding: 3px;
}

/* OR */

.form-surface-view .SilverLinkListItem
{
        background-color: #e6e6e6;
padding: 3px;
}

/* .MyLinkListText - Change text family to Courier New, text size to 16px, text style to normal. */

.MyLinkListText
{
        font-family: courier new;
font-size: 16px;
font-style: normal;
}

/*OR */

.form-surface-view .SilverLinkListItemText
{
        font-family: times new roman;
font-size: 16px;
font-style: normal;
}


/* .MyLinkListLinks - To change text family to Times New Roman and text size to 16px, text to Oblique. */

.MyLinkListLinks
{
        font-family: times new roman;
font-size: 16px;
font-style: oblique;
}

/* OR */

.form-surface-view .SilverLinkListItem
{
        font-family: times new roman;
font-size: 16px;
font-style: oblique;
}

Curve corner border by 8px, add space between checkbox by 5px, background color to azure, add space outside list.

.MySortableCheckBoxList
{
        border-radius: 10px;
    padding: 5px;    
    background-color: azure;
   margin: 2px;
}

/* OR */

.form-surface-view .SortableCheckBoxMain
{
        border-radius: 10px;
    padding: 5px;    
    background-color: azure;
    margin: 2px;
}

Change border width to 1px and color to yellow, curve corner border by 10px, font family to Times New Roman, text size to 14px, text color to black, background color to Aqua.

.MySubDialogButton
{
        border: 1px solid yellow;
border-radius: 10px;
font-family: times new roman;
font-size: 14px;
    color: black;
    background-color: aqua;
}

/* OR */

.form-surface-view .buttonControl
{
        border: 1px solid yellow;
    border-radius: 10px;
    font-family: times new roman;
    font-size: 14px;
    color: black;
    background-color: aqua;
}

/* .MySubDialogLink font family to Times New Roman, text size to 14px, text color to orange. */

.MySubDialogLink
{
        font-family: times new roman;
font-size: 14px;
color: orange;
}

/* OR */

.form-surface-view .SubDataFlowLink
{
        font-family: times new roman;
font-size: 14px;
color: orange;
}

/* Add border to div by 1px solid color to black, curve corner border by 10px. */

.form-surface-view .SubDataFlowLinkContainer 
{    
        border: 1px solid black;
    border-radius: 10px;
}

Change border width to 2px and color to blue, curve corner border by 10px, background color to white.

.MySubDialogImageButton
{
        border: 2px gloove blue;
border-radius: 10px;
background-color: white;
}

/* OR */

.form-surface-view .sdf-image-button
{
        border: 2px gloove blue;
border-radius: 10px;
background-color: white;
}

Change border width to 10px and color to orange, curve corner border by 10px, background color to white.

.silver-video {
    border: solid orange 10px;
    background-color: white
}