eMember – Change border color of input fields on registration form

[SueParker]

I would like to change the CSS for the input fields on the registration form.

It LOOKS like they are embedded in the HTML somewhere, perhaps? I don’t want them to be bordered in red…I want to use my page’s own form formatting CSS. If you can direct me to the proper page, hopefully I can remove the embedded styling.

<input id="wp_emember_afirstname" class="eMember_text_input" type="text" value="" size="20" name="wp_emember_afirstname" sourceindex="1" style="border-style: solid; border-width: 1px; border-color: rgb(238, 50, 50) rgb(240, 80, 80) rgb(240, 80, 80); box-shadow: 1px 1px rgb(250, 230, 230) inset;">

Thanks,

Sue

[Peter]

Hi,

Can you please send a link to your registration page so we can see what you mean?

You should be able to change the CSS styling by using firebug to determine which properties you should change, and then placing the CSS code in the eMember_custom_style.css file.

Please see this post about how you can use firebug to modify CSS:

http://www.tipsandtricks-hq.com/how-to-use-firebug-to-modify-your-wordpress-sites-css-video-tutorial-4037

[SueParker]

Oh yes, I use Firebug all the time and would be lost without it for many reasons!

I wonder…if it has anything to do with pseudo classes or something along that line. And if the browser is thinking the empty fields are invalid on page load?

Here’s a link to the page:

http://melodyraejones.com/blog/join-us/registration

Thanks!

[SueParker]

So I played a bit with the pseudo classes in the css and it’s interesting…you can see the border disappear when you go into the field (I added some CSS for :focus)

Am I on the right path?

[Peter]

Hi,

I’ve looked at the form on your page and I don’t see any red borders or boxes. (I checked with Chrome and FF)

Your form’s “First Name”, “Last Name” and “Email” inputs are faintly outlined in greyish and very much look like they blend well with your theme.

[SueParker]

Thanks for looking Peter…While you were looking I was playing with the psuedo classes and put one on input:required and input:focus. Maybe that did the trick.

[Author]

Posts