Grow your CSS skills. Land your dream job.

Is it possible to change SUBMIT BUTTON default styling?

  • # April 19, 2010 at 8:51 pm

    When clicking on a browser default styled submit button, a blue glow appears around the button when clicked… is it possible to change the color of this glow? So far I’ve tried the following:

    Code:
    input[type="submit"]:focus {
    background-color: #F37121 !important;

    But it does not work… any suggestions?

    Thanks!

    # April 20, 2010 at 12:19 am

    Also… I’ve browsed through Firefox’s default internal style sheet at: resource://gre/res/forms.css and have found the following rule:

    Code:
    button:focus::-moz-focus-inner,
    input[type="reset"]:focus::-moz-focus-inner,
    input[type="button"]:focus::-moz-focus-inner,
    input[type="submit"]:focus::-moz-focus-inner,
    input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
    border-color: ButtonText;
    }

    I’ve never heard of ButtonText or ButtonFace before… does anyone know if this is possible?

    # April 20, 2010 at 12:41 pm

    Keep in mind focus doesn’t work IE. You have to do some javascript for that. Additionally, focus wouldn’t work with a button the way your trying to do it. You would need to use :active instead. This also will NOT work with IE.

    # April 20, 2010 at 3:40 pm

    even when I use :active, it doesn’t effect the blue outer glow… see attached screeshot….

    # April 20, 2010 at 4:18 pm

    you’re not going to effect that with css. You may be able to play with css3 or find some jquery to handle it.

    in this tut the guy used css3 and jquery to get the glow effect:
    http://www.d13design.co.uk/2010/04/apple-style-buttons-using-css3-and-jquery/

    that should give you some insight on what you need to do.

    # April 20, 2010 at 6:40 pm

    Got it. Thanks for your help.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".