Customizing form layout

asked on February 27, 2018

I am attempting to customize the layout of a form using CSS to move the fields and labels to the desired placement. The issue I am having is to get the "onfocus" highlight for the field to move with the field itself and to resize it to the size of the field. The attached .png shows that while the field labeled State has the focus, the original position of the field is where the highlight appears.

Also I want the extra spacing between the City/State/Zip Code line and the Email field, which is the original position of the State and Zip Code fields, removed. The attached .txt is actually the .xml download of the business process for the form, just renamed to be attached to this message.

UtilityDonation_highlight.png (6.44 KB)

| Download

Business Process UtilityDonation.txt (44.95 KB)

| Download

0 0

replied on March 6, 2018 • Show version history

Hey Leigh,

Not sure if this will be helpful or not but I moved away from using the default highlight and opted for a focus that eases in and out of the selected field. Just looks a little more polished to me. Paste the code below in the CSS and adjust the color to whatever you are looking for. I'm fairly sure this code is far from perfect where I am just learning CSS myself but it seems to work just fine for me.

Input, .cf-field select, .form-q textarea, .fileuploader {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
  border: 1px solid #b4b4b4;
}

input[type=text], textarea, .cf-field select, 
.cf-field input[type='checkbox'], .cf-field input[type='radio'] {
  -webkit-transition: all 0.55s ease-in-out;
  -moz-transition: all 0.55s ease-in-out;
  -ms-transition: all 0.55s ease-in-out;
  -o-transition: all 0.55s ease-in-out;
}
 
input[type=text]:focus, textarea:focus, .cf-field select:focus,
.cf-field input[type='checkbox']:focus, .cf-field input[type='radio']:focus {
  box-shadow: 0 0 15px #ffa07a;
  Padding: 5px 5px 5px 5px;
  margin: 5px 1px 5px 0px;
  border: 1px solid #ffa07a;
}

4 0

Question

Question

Replies

Sign in to reply to this post.