Default ext-all.css obstructs adding outline to focused elements in Webkit

[Dipish]

REQUIRED INFORMATION




Ext version tested:

• Ext 4.0.7
• Ext 4.1

Browser versions tested against:

• Chrome

DOCTYPE tested against:

• HTML5

Description:
The default ExtJS' styles prevents me from styling elements' :focus state in Webkit.


Steps to reproduce the problem:

• Create an empty HTML page with ExtJS loaded
• Add a <input type="text" /> element (for the sake of example, this can be any focusable element)
• Add something like this to your custom css:
  

  input[type="text"]:focus {
  outline: solid 1px red;
  }

• Focus the input element

The result that was expected:

• The element should get a red outline

The result that occurs instead:

• No outline

HELPFUL INFORMATION


These are the lines that are causing the trouble:
In Ext 4.0.7 gpl

.x-webkit :focus {
outline: none !important;
}

In Ext 4.1.0-beta-1:

/*misc*/
/* line 5, ../themes/stylesheets/ext4/default/widgets/form/_all.scss */
.x-webkit *:focus {
  outline: none !important; }

I understand that you probably need these rules but they get into the way if I DO want to set outline to focused elements via pure CSS.

The current workaround is to add !important to your custom styles (which is known as bad practice and makes your code less manageable), e.g.:

input[type="text"]:focus {
outline: solid 1px red !important;
}

Please find a better solution.

[scottmartin]

Thank you for the report!

Regards,
Scott.