Skip to content


Subversion checkout URL

You can clone with
Download ZIP


The "success" class is ugly on form validations #456

arjan opened this Issue · 9 comments

4 participants


Ugly green

The green color stands out and I don't think it is very common to have form fields like this change when everything is OK.

What do we do about it?
I'd say, let's not add the success class every time a validator succeeds.

cc @mworrell @kaos

@arjan arjan was assigned

why not change the css?
I'm just thinking of a possible future where we might want a class added on validator success...


I'm trying but it's not easy, as the success class is buried deep inside bootstrap.
I'm tempted to change the class name just to get rid of the green...


I am all for not too many configurations, so better to have something easy that works on most of the cases well.

I like the word "success", and in a way it is good that it is already part of Bootstrap. That it is ugly is a Bootstrap problem, as is the problem with customization and later updates.

Other Bootstrap plugins (like jQuery form validation) also use the same error and success classes. That makes me lean more to adapting the Bootstrap definition than to change the class name being used.

Is there an easy way to generate the css from the .less file without installing Node and the kitchen sink?


OK, I've got this nudge for a while now (think last time it was Marc fiddling with modifying the bootstrap.css rules)...

I added this to a css file (tested it on a blog site, added last to the project.css file and tested it on the contact form):

.control-group.success > label,
.control-group.success input,
.control-group.success textarea {
  color: #333 !important;
  border-color: #ccc !important;

And voila, no green (after leaving the form field, at least). It's not complete, and the drawback is that the colors has to be specified in yet another spot, but it's rather doable compared to editing the bootstrap.css file. :)

Noticed a bug where the css class wasn't removed for the control-group around the message field upon entry... hmm.

Note: it doesn't matter which order the css files are given, which is rather nice, I think.


rather ugly CSS hack (!important is considered harmful..) but if it works...

I'll test it and see if indeed all the green is gone. If so I'll commit it to the admin css


I think bootstrap css modification is needed. I'll create a zotonic/bootstrap repo and will push the changes to a zotonic-admin branch there.


Hmm... seems I didn't need the !important after all... but then the order does matter. You need to have the "override" rules defined after the ones to be overridden. That is, the last defined will be used.

Baha, just closed... :p

@arjan arjan closed this in 3a1b203

+1 for the added flexibility though :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.