2

I want to use jquery dialog with my custom buttons but I don't want first button to be styled like it is clicked...

The same is here: http://jqueryui.com/demos/dialog/#modal-confirmation If you don't do anything, the button "Delete all items" will be colored in orange. This style will disappear if you click anywhere on the page.

In my app the same thing is always happening to the first button no matter how many buttons are there... So can I make all buttons the same without highlighting the first one?

Improve this question

1 Answer 1

Reset to default
3

The colouration here is indicating something more. The orange is indicating the current focus. This helps when using keyboard support, meaning if you press enter that button will be activated; as to be expected, tabbing between the two buttons functions as you might expect.

With that in mind, there are two options:

  1. Remove focus from the button when the dialogue is generated.
  2. Style the button using the ui-state-focus to differentiate it from ui-state-hover and ui-state-active.

I'd say it's unwise to remove the focus since then you obfuscate keyboard support. Instead, go for the less invasive approach by embracing the keyboard support. Style the classes that the jQuery UI maintains to provide a subtle difference in the button appearance so that the behaviour is more apparent.

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

1 Comment

Right, the coloration is there for a reason - the user knows what happens if they just press enter. You can change the style but on behalf of the users of your site please don't remove it completely.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.