Customize Jquery validation message css

Question

How can i customize the Jquery validation message in css

From this enter image description here

To this: enter image description here

Can i anyone help me produce the above styling?

I tried label.error { float: none; padding-left: .5em; vertical-align: top; background-color: #333; font-size: 10px; border: 1px solid #999; color: #FFF; display: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 0; -webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-box-shadow: 0 0 6px #ddd; -webkit-box-shadow: 0 0 6px #ddd; white-space: nowrap; padding-top: 2px; padding-right: 10px; padding-bottom: 2px; padding-left: 5px; font-family: Arial, Helvetica, sans-serif; -moz-opacity: .90; filter: alpha(opacity = 90); opacity: .90; margin-left: 5px; margin-top: -2px; }

But i couldn't align it correctly enter image description here

Thanks

What have your tried so far?... and did you make this yourself or is this a plugin you're using? — Oliver Tappin
– Oliver Tappin, Commented Jul 16, 2012 at 16:11
i am using docs.jquery.com/Plugins/Validation and i tried float: none; padding-left: .5em; vertical-align: top; background-color: #333; font-size: 10px; border: 1px solid #999; color: #FFF; display: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 0; — skystar7
– skystar7, Commented Jul 16, 2012 at 16:17
-webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-box-shadow: 0 0 6px #ddd; -webkit-box-shadow: 0 0 6px #ddd; white-space: nowrap; padding-top: 2px; padding-right: 10px; padding-bottom: 2px; padding-left: 5px; font-family: Arial, Helvetica, sans-serif; -moz-opacity: .90; filter: alpha(opacity = 90); opacity: .90; margin-left: 5px; margin-top: -2px; but i couldn't align it correctly — skystar7
– skystar7, Commented Jul 16, 2012 at 16:17

Alper Turan · Accepted Answer · 2015-04-27 17:54:59Z

1

Something like this:

box {
    padding: 5px;
    background: black;
    color: white;
    border: 1px solid gray;
}
box:after {
    content: "";
    position: absolute;
    left: 20px;
    bottom: 0px;
    border-top: 10px solid black;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

edited Apr 27, 2015 at 17:54

Alper Turan

1,21811 silver badges24 bronze badges

answered Jul 16, 2012 at 16:10

dezman

19.6k13 gold badges58 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahesh KP · Accepted Answer · 2012-07-17 09:47:28Z

0

I think it is difficult to customize the default error message like that.

Its better you can do custom validation for this. ie instead of showing the default error message you can show a message popup. So according to the type of error you can show the corresponding popup.

A similar thing can be seen in this http://www.underdog.co.uk/

answered Jul 17, 2012 at 9:47

Mahesh KP

6,47613 gold badges54 silver badges71 bronze badges

Collectives™ on Stack Overflow

Customize Jquery validation message css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related