View Full Version : [OPEN-1072] Checkbox and radio button have no focus indication in Chrome

25 Jun 2010, 12:01 PM
Ext version tested:

Ext 3.2.1

Adapter used:

jquery 1.3.2

css used:

ext-xtheme-gray.css -- Happens without this file too

Browser versions tested against:

Chrome 5.0.375.86 beta

Operating System:

Windows 7 64-bit


When tabbing between form fields, when you land on a checkbox or a radio button there is no indication that the focus is on that item. In plain HTML forms with no CSS the checkboxes and radio buttons "glow" yellow. In other browsers (IE7, IE8, FF3) there is a dotted outline indicating the item that is focused.

Test Case:

<style type="text/css">
@import url("resources/css/ext-all.css");
/*@import url("resources/css/ext-xtheme-gray.css");*/

<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
new Ext.Panel({
renderTo: Ext.getBody(),
layout: 'form',
items: [{
xtype: 'checkbox',
boxLabel: 'checkbox'
xtype: 'radio',
boxLabel: 'radio'

This plain HTML works as expected:

<input type="checkbox" />
<input type="radio" />

Steps to reproduce the problem:

View the above code in Google Chrome browser

The result that was expected:

Checkboxes and radio buttons should have a visual indication that they have tab focus.

The result that occurs instead:


Debugging already done:

Looked at CSS rules applied to these elements when focused, didn't see anything relating to :focus
Added a rule to apply (outline: 1px dotted;) to all checkboxes and radio buttons. This shows the outline when not focused and the outline disappears when focused.
Added a :focus rule with same same rule as above, nothing happened when focused.