Fix for browsers with JavaScript but without box-shadow enabled. outline: 0; outline-width: 2px; doesn't work, requires an outline-style to be set.

This commit is contained in:
zachleat 2011-12-27 16:29:53 -06:00 committed by scottjehl
parent 3ca5a8a85e
commit e19ee8d953
2 changed files with 18 additions and 12 deletions

View file

@ -1125,7 +1125,7 @@ a.ui-link-inherit {
box-shadow: 0px 1px 0 rgba(255,255,255,.4);
}
/* Focus state - set here for specificity
/* Focus state - set here for specificity (note: these classes are added by JavaScript)
-----------------------------------------------------------------------------------------------------------*/
.ui-btn:focus {
@ -1151,5 +1151,6 @@ a.ui-link-inherit {
/* ...and bring back focus */
.ui-mobile-nosupport-boxshadow .ui-focus,
.ui-mobile-nosupport-boxshadow .ui-btn:focus {
outline-width: 2px;
}
outline-width: 1px;
outline-style: dotted;
}

View file

@ -183,16 +183,21 @@ $.widget( "mobile.slider", $.mobile.widget, {
slider.insertAfter( control );
// NOTE force focus on handle
// Only add focus class to toggle switch, sliders get it automatically from ui-btn
if( cType == 'select' ) {
this.handle.bind({
focus: function() {
( $.support.boxShadow ? slider : $( this ) ).addClass( $.mobile.focusClass );
},
blur: function() {
( $.support.boxShadow ? slider : $( this ) ).removeClass( $.mobile.focusClass );
}
});
}
this.handle.bind({
focus: function() {
( cType == 'select' ? slider : $( this ) ).addClass( $.mobile.focusClass );
},
blur: function() {
( cType == 'select' ? slider : $( this ) ).removeClass( $.mobile.focusClass );
},
// NOTE force focus on handle
vmousedown: function() {
$( this ).focus();
},