CODEWITHSUNDEEP
cssfirefoxbuttondefault
KoZm0kNoT
KoZm0kNoT

Reputation: 480

CSS to change default button in Firefox when user presses ENTER

I have a form for account settings that has multiple <button type="submit"> elements and a single <input type="submit"> at the bottom. If the user clicks a specific button everything is good. The problem is when the user does not click a specific button but just presses ENTER.

In IE, the last button is always the default button for pressing ENTER, which is the way I want it. In Firefox, the first button is always the default - not what I want. I suspect there must be a way for setting which is the default button using CSS for Firefox but I've searched endlessly and can't seem to find anything. The TABINDEX attribute does not help. Any help is appreciated!

I know how to do it in jQuery but this part of the form needs to be able to handle it with only CSS.

<form method="post" id="loginform" action="<?php echo MBF_get_login_url(); ?>?action=register" enctype="multipart/form-data">
    <button type="submit" class="btn btn-danger" id="delete_avatar" name="delete_avatar">
        <i class="icon-trash icon-white"></i>
        <span><?php _e( 'Delete Avatar', $current_theme_locale_name ); ?></span>
    </button>
    <button type="submit" class="btn btn-danger" id="delete_bizlogo" name="delete_bizlogo">
        <i class="icon-trash icon-white"></i>
        <span><?php _e( 'Delete Logo', $current_theme_locale_name ); ?></span>
    </button>
    <input type="submit" class="link_btn margl5 margr10" value="<?php echo $mode_submit_title; ?>" id="submits" name="submits" />

Upvotes: 1

Views: 251

Answers (2)

KoZm0kNoT
KoZm0kNoT

Reputation: 480

Just in case this might help someone I ended up with this simple HTML solution:

<button type="submit" style="position:absolute;left:-9999px;" id="implicit_submit" name="implicit_submit"></button>

This non-visible button is the first submit button at the top of my form. It gets activated by browsers that default to the first submit button on ENTER and simply posts the form just like clicking the last button does - so this solved my problem.

Upvotes: 1

Oriol
Oriol

Reputation: 288700

According to HTML5 spec,

4.10.22.2 Implicit submission

A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.

Therefore, Firefox does it the standard way, so you should try to fix IE's behavior instead of Firefox's one.

Upvotes: 1

Related Questions