Pre-Defined CSS Classes for Forms
  • 16 Feb 2022
  • 11 Minutes to read
  • Dark
    Light

Pre-Defined CSS Classes for Forms

  • Dark
    Light

Overview

This article provides the CSS class code templates for 21 different Form controls. 

These CSS classes can be uploaded and then applied onto Form controls

Expand each accordion box below to view the a copy-able CSS template. Within the /* */ markings of the code are bits of plain text that provide configuration information.


Label

CSS Class Template

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;
}


Button

CSS Class Template

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;
} 


Close Button

CSS Class Template

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;
}


CSS Class Template

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;
}


Image Button

CSS Class Template

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;
}


CSS Class Template

/* 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;
}


Tag Editor

CSS Class Template

/* .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;
}


Approval Chain Editor

CSS Class Template

/* 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; 
}


Text Box

CSS Class Template

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;
}


Password Text Box

CSS Class Template

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;
}


Masked Text Box

CSS Class Template

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;
}


Date Picker

CSS Class Template

/* 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;
}


Radio Button List

CSS Class Template

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;
}


List Box

CSS Class Template

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;
}


CSS Class Template

/* .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;
}


Check Box List

CSS Class Template

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;
}


CSS Class Template

/* 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;
}


Check Box List

CSS Class Template

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;
}


Sub Dialog Button

CSS Class Template

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;
}


CSS Class Template

/* .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;
}


Sub Dialog Image Button

CSS Class Template

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;
}


Video

CSS Class Template

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
}



Was this article helpful?