Is there any way to remove the blue border that is placed around the component created in a visualforce page. When the component is clicked on the border appears. I have yet to find a way to remove it

Stupid border VF Page



        $Lightning.use("c:myTestApplication", function () {
                    function (cmp) {



        <div id="theLocation" tabindex="-1">


Lightning Application

<aura:application access="GLOBAL" extends="ltng:outApp" description="myTestApplication">
    <aura:dependency resource="ChargentP2:myTestComponent"/>

Lightning Component

<aura:component description="myTestComponent">

        Some text

I believe this is the most basic I can get it and it replicates well. The border is annoying......

  • 1
    I believe it's coming from slds-has-focus, but I'm kind of surprised it does this, as I would only expect input/textarea/select elements to have this.
    – sfdcfox
    Commented Jan 7, 2017 at 3:01

1 Answer 1


Remove tabindex="-1" from the <div> or try adding a style element to the VF page that contains:

#theLocation {
    outline: none;
  • the tabindex was the issue.....That was a holdover from the div previously being a modal div.....Nice catch and thank you.
    – Eric
    Commented Jan 7, 2017 at 11:58

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .