How to remove the blue line made by ng-click

[waitingduck]

Hi,

I would like to know is it possible to remove the blue line made by ng-click because this blue line render not as expected. I cannot reproduce it on your demo, but maybe is similar to the result when you double click the row and the left and right line will disappear(in live demo).

After add ng-click to \<tr>. It shows blue line when you click the row. If you double click, left and right line disappear.

Mine is worse, it some time looks like this or

Here is my code

<md-table-container>
  <table md-table md-row-select="true">
    <thead md-head md-order="myOrder.order">
    <tr md-row>
      <th md-column ng-repeat="(index, col) in requestTable.data.header"
          md-order-by="{{requestTable.data.keys[index]}}">{{col}}
      </th>
    </tr>
    </thead>
    <tbody md-body>
    <tr md-row ng-repeat="data in requestTable.data.data | orderBy: myOrder.order" ng-click="">
      <td md-cell ng-repeat="col in requestTable.data.keys" >{{data[col]}}</td>
    </tr>
    </tbody>
  </table>
</md-table-container>

Not sure what happened here. So my first thought is to disable the blue line. Any suggestion is welcome.

Thanks.

[ielektronick]

Hi @waitingduck The issue is completely CSS. :) So, I assume you're using Chrome. Chrome adds outline styles for focused elements depending device (mobile or desktop). Please take a look: And in computed: To fix that just add:

tr.md-row:focus {
    outline: none;
}

PROFIT :1st_place_medal:

[waitingduck]

Hi @ielektronick

That's a good suggestion and fix my problem. But wondering do you know why is that happen?

Thanks!

[AntonisFK]

@waitingduck Its a default browser outline its supposed to help keyboard users and users with reduced vision where there currently are on the page.

[waitingduck]

I see. Thank you @AntonisFK and @ielektronick. Problem solved:)