Does anyone know how to REMOVE the ::selection blue border (if that is even what causes it) from a specific input?

I have tried many ways but cannot seem to get the border to remove.

I want the border to be

    background-color: rgb(255, 255, 255);
    border-color: rgb(75, 202, 129);
    box-shadow: rgb(75, 202, 129) 0 0 0 1px inset;
    background-clip: padding-box;

Which I can do as long as the cursor is not in the field. I need my style to persist in spite of the selection, focus, or whatever it causing the blue border...

A bonus question:

I just ran into an issue using <aura:if> The attribute was true but it never displayed unless I put {!v.attributeName} on the page prior to the aura:if. The attribute ad a default value.

Anyone ran into this before??

  • @JanisBott - I have tried with all of them...I ended up forcing the background to be what I wanted the border to be (green or red) based on validity of the input. Then when focus is gone background goes away and border shows. A lot of trouble just to keep the background. Had to dump the <lightning:input> as well as it overrode the background no matter what I did.
    – Eric
    Jan 12, 2017 at 3:35

1 Answer 1


If you're using lightning ui tags, particularly with a <lightning:button class="foo">, you need to use label="base" to disable the Lightning Styling. base removes all the styling of the native button. It's typically used to trigger a modal or display a "like" link.

You might also be running into your browser's default "hover" behaviors as well which are intended to highlight active content. If that's the case, you'll want to add properties for :hover, :focus, :link, and :visited, etc to your CSS.

  • Thanks for the answer but I am using a regular <input> with class slds-input for the sizing etc. I have found the UI and Lightning inputs useless for the most part since the data cannot be bound to an attribute and update the attribute without initializing every property in said attribute first. so I have just went with standard inputs and grabbing the value is JS. Seems the SLDS is placing the border highlights and I cannot get CSS specific enough to override. Inline does not work either...
    – Eric
    Jan 22, 2017 at 20:51
  • There's some CSS to override that too. I'll find it my notes for you.
    – crmprogdev
    Jan 22, 2017 at 20:52
  • 1
    Thanks for bringing me back to this. As I am learning more advanced CSS I updated my CSS to include the :focus pseudo as suggested with a more specific selector and it seems to work. Wish I had a web development background, would have made things much easier. The complexity and functionality of complex CSS continue to amaze me....
    – Eric
    Jan 22, 2017 at 21:13
  • Glad I could help. Designing for early web sites using HTML 3 is where I initially got started, even before CSS 1 or JS came out. It was around 1996 - 1997 when I was getting into this stuff. LOL.
    – crmprogdev
    Jan 22, 2017 at 21:47

You must log in to answer this question.

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