When the input element is 'focused' (currently selected/tabbed) , Chrome puts a blue border around it. And I just can't figure out how I can get this away. I think the browser is putting it there. But I can't get the right style to overwrite it. Any experience with this? Thanks


< lightning:input aura:id="firstName"   value="{!v.something}" class="slds-input slds-input_bare " name="Name" label="First Name" onchange="{!c.doSomething}" />

The blue border is added by the lightning design system on the slds-input class like this:

.slds-input:focus, .slds-input:active {
    outline: 0;
    border-color: rgb(21, 137, 238); /* This is the blue color of the border */
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 3px #0070d2; /* This is the blue color of the shadow */

If you want to remove it you can override the color. Here's an example with the default color:

.THIS .slds-input:focus, .THIS .slds-input:active {
     border-color: rgb(216, 221, 230);
     box-shadow: none;
  • Yes. This should work – Muzammil Bajaria May 24 '17 at 10:01
  • Great! Thanks for your help. This solution worked for me. – Ant May 29 '17 at 14:38

You should be able to remove it by setting the the CSS property outline: none;. In lightning CSS you can use something like this. But remember it will remove the highlighting for all input elements.

.THIS input{
    outline: none;

If you want to remove from specific input boxes then add specific CSS classes only to those elements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.