Remove blue border on Lightning Component within VF Page created using ltng:outApp

Question

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

VF Page

    <apex:includeLightning/>

    <script>

        $Lightning.use("c:myTestApplication", function () {
            $Lightning.createComponent(
                    "c:myTestComponent",
                    {},
                    "theLocation",
                    function (cmp) {

                    });
        });

    </script>


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

</apex:page>

Lightning Application

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

Lightning Component

<aura:component description="myTestComponent">

    <div>
        Some text
    </div>
</aura:component>

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

Answer 1

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

#theLocation {
    outline: none;
}