Formstack

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

...remove focus from fields (yellow highlighting)

.fsFieldFocused {
  background-color: transparent;
}


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