Question

I'm having great troubles removing the dotted focus outline/border from my Uploadify SWF button, shown in Firefox.

enter image description here

I have tried setting the uploadify object & button CSS to:

:focus { outline:none; }
::moz-focus-inner { border:none; }

I also tried focusing on another element using Uploadify's onDialogOpen callback function but still nothing.

How do I get rid of this annoying outline?


My Uploadify CSS:

.uploadify {
    position:relative; margin-top:10px; outline:none;
}
.uploadify-button {
    color:#0CF; font-size:12px; text-align: center; border-top:solid 1px #CCC; border-left:solid 1px #CCC;
    border-right:solid 1px #CCC; margin-bottom:0 !important; outline:none;
}
.uploadify:hover .uploadify-button {
    text-decoration:underline;
}
.uploadify-button.disabled {
    background-color:#D0D0D0; color:#808080;
}

My Uploadify JS:

$('#file_upload').uploadify({
    'buttonText'        :   'Select Files',
    'width'             :   90,
    'removeCompleted'   :   false,
    'fileSizeLimit'     :   '5MB',
    'formData'          :   {'article_id': <? echo $article_id ?>, 'admin_id': '<? echo $_SESSION['admin_id'] ?>', 'referrer': 'Blog Setup'},
    'swf'               :   'uploadify/uploadify.swf',
    'uploader'          :   'uploadify/uploadify.php',
    'onUploadStart'     :   function() {
        $('#photos_option_loading').show();
    },
    'onQueueComplete'   :   function() {
        $('#photos_option_loading').hide();
    },
    'onUploadError'     :   function(file, errorCode, errorMsg, errorString) {
        alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
    }
});

My Uploadify HTML:

<input type="file" name="file_upload" id="file_upload">
Was it helpful?

Solution

This is a feature that exists at the browser level. There is not much you can do about this.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top