How can I control form field width?

Hello,

I used the s2Member hack file (s2-o.php) to remove s2Member CSS from the forms–but they still look the same. Every field spans the entire page width. It makes our website look less than professional.

I inspected CSS and discovered that all labels and fields have unique identifiers.

How can I use CSS to tell all labels to do something and all field to do something without requiring a five foot long CSS addition to manage all the unique s2Member elements with all s2member elements defined?

e.g.

.s2member-label {text-decoration:none; margin-top:20px;}
.s2member-field {width:40%;}

Thank you for your help finding the freedom to design our forms the way we want them to look.

I’m genuinely disappointed at the way form elements are laid out and designed as if it were government work.

Chris

Are you sure the CSS hack you’re using has really removed the .css file from being loaded? If it still looks the same, it seems to me that it’s either still there (check the source code) or there’s some other styles in another separate stylesheet that’s stretching your form fields across.

The way I customized the s2member form was to prevent the default CSS from loading (same as you), wrapped a div tag with .form class around the s2member shortcode, then styled all the form fields to be the same width. Here’s some sample code:

.form {
  width: 400px; /* the width of the checkout form */
}
.form input,
.form select {
  -webkit-box-sizing: border-box; /* see: http://css-tricks.com/box-sizing/ */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.form input[type="text"],
.form input[type="password"],
.form select {
  width: 100%; /* stretch text and password fields and select boxes all the way across */
}


/* following styles are just cosmetic for IE7 (may need to fidget with values) */
.form input[type="text"],
.form input[type="password"] {
  *width: 92%; /* for IE7 and below, as it doesn't understand box-sizing */
}
.form select {
  *width: 98%; /* for IE7 and below, as it doesn't understand box-sizing */
}

That’s just the basics. You can style the fields to look nicer with some additional CSS.

Now, if you don’t want all your fields to have the same length, then you’ll have to target them by class or ID.

TJ!

Elegant, simple and perfect solution!

I only wish our friends at s2Member had designed the CSS classes and IDs so that all fields could be changed with single code elements (e.g. s2member-field-email, s2member-field-first-name, etc).

…but this is a superb work around!

And it gives an excellent way to refine the forms.

Thank you,

Chris