[Solved] Input buttons incorrectly taking on CSS where none defined

[owlinargyle]

I’ve created a form styled with CSS. I have two Input buttons at the bottom of it. I have not defined any styles for these buttons and just want to use their default styles defined by whatever browser the user may be using. However, the Input buttons are clearly being styled by something within the CSS I’ve already defined. I just can’t figure out what.

You can see the difference when comparing it to the “check availability” Button that is also not styled. It’s displaying correctly, while the input buttons are not.

Any body seeing what I’ve missed? My Codepen

I’d like to avoid actually applying any style to these buttons, as other buttons on forms throughout our site do not have any styles applied. =(

[Alen]

/* form element visual styles */

.enrollform input,
.enrollform textarea,
.enrollform select {
  border:1px solid #707070; /* <<---- .enrollform input */
}
.enrollform input:focus,
.enrollform textarea:focus,
.enrollform select:focus {
  background: #fff;  /* <<---- */
  border:1px solid #555;  /* <<---- */
}

[owlinargyle]

Those are supposed to be applied only to the form fields.

Why are they also applying to the Input Buttons?

[Paulie_D]

I think @Alen is saying that the input buttons are<inputs> and they are inside the form with a class of .enrollform..so you have defined a style for them.

The “check availability” button is a <button> and not an <input>.

[owlinargyle]

Okay, that’s what I was afraid of.

So my only option left is to define other specific styles for the Input [type=”submit”] and Input [type=”reset”], then. Correct?

[Paulie_D]

If you want ‘normal’ looking buttons for those particular two you might try making the styled selector a little more specific.

Since the styled inputs are all inside menus and the ones you want unstyled are not this might do the trick.

Change

    .enrollform input, .enrollform textarea, .enrollform select { 
        border:1px solid #707070;
}

to

    .enrollform ul input, .enrollform textarea, .enrollform select { 
        border:1px solid #707070;
}

This will only affect inputs inside unordered lists.

It’s a quick fix but it seems to work

[Senff]

Or apply the styles to not all inputs, but only input[type="text"] and input[type="email"]. A bit like this: http://codepen.io/senff/pen/lxdLf

[owlinargyle]

Senff, I’d tried something like that before and it didn’t work when I did it. Because yours is exactly what I was trying to do. I must have missed something. I’m going to have to go back through my previous saves to see what it was.

THANK YOU!

[Author]

Posts