CSS - Field Edits

All fields

...change the label color

.fsLabel {
  color: #aabbcc;
}

...center align Form fields

.fsBody .fsPage {
  text-align: center;
}

...change the text color of the supporting text

.fsSupporting {
color: #aabbcc;
}

...change the color of the placeholder text

.fsForm ::-webkit-input-placeholder{
color: #097AB6;
}
.fsForm ::-moz-placeholder {
color: #097AB6;
}

...add focus background for a field (yellow highlighting)

.fsFieldFocused:not(.fsValidationError) {
background-color: yellow;
}

 

(Change the color of the highlighting by replacing "transparent" with the name or CSS color of the color)

...changes the color of the field focus outline

.fsForm :focus {
outline-color: #75BFE2;
}

 

// name fields

 

.fsBody .fsForm input.fsField[type="name"]  {
 width: 100px;
}

 

// short answer fields

 

.fsBody .fsForm input.fsField[type="text"]  {
 width: 100px;
}


.fsBody .fsForm input.fsRequired[type="text"]  {
 width: 100px;
}

 

// long answer fields

 

.fsBody .fsForm textarea.fsField  {
 width: 100px;
}

.fsForm textarea.fsRequired  {
 width: 100px;
}

 

// number fields

 

.fsForm input.fsField[type="number"]  {
 width: 100px;
}

 

 

// checkbox fields

 

// radio buttons

 

// phone number fields

 

.fsBody .fsForm input.fsRequired[type="tel"]  {
 width: 100px;
}

 

// address fields

 

// email address fields

 

.fsBody .fsForm input.fsRequired[type="email"]  {
 width: 100px;
}

 

// matrix fields

 

...increase the width of the label

.fsBody .fsForm .fsMatrix th, .fsBody .fsForm .fsMatrixLabel  {
   width:  94%;
}

 

// dropdown field

...change the font size of options in a dropdown

.fsForm select {
 font-size: 11px;
}

// date/time field

...remove the calendar from a date/time field

.fsCalendarPickerLink{
 display: none;
}

 

 

// signature fields

 

...increase the width and height of a signature field

.fsSignature  {
  height:  120%;
  width:  120%;
}

 

// required asterisk

...change the color of the required asterisk

.fsRequiredMarker {
  color: #FFFFFF;
}

...hide the required asterisk

.fsRequiredMarker span { color: transparent; }