how to hide blue line in the active state.

Targets Web
1

If listbox is active, it surrounds the blue line. how to hide blue line?
xojo 2018r2

2

I had this same issue last week. The reason it shows up on Web is the browser is trying to be helpful with the tabIndex. If you try to set the tab order (direct relation to the tabIndex) to -1 to use a HTML trick, the IDE overrides it back to 0 destroying any chance of doing things in a non-intrusive manner. I settled on a Javascript framework hack because there was no better way.

Framework hacks disclaimer: Xojo does not support framework hacks, nor will they fix it if something changes in the future. I do not take responsibility for your usage of this code, and am under no obligation to fix it should Xojo change something in the future.

Public Sub RemoveFocusRing(extends oCtrl as WebControl)
  // Get rid of the focus ring
  oCtrl.ExecuteJavaScript("var oThis = document.getElementById('" + oCtrl.ControlID + "');if (oThis.hasAttribute('tabindex')) {oThis.removeAttribute('tabindex');}")
End Sub
4

thanks ,Weblistbox succeeds.
Other web controls such as WebPopupMenu do not work with this method. Is weblistbox the only control to do this?

5

You need to inspect the DOM, some Xojo web controls are made of multiple elements.
WebPopupMenu is something like:

[code]



option 1
option 2

[/code] I don't know where's the "tabindex" attribute but it should be possible to remove it.

Be careful with these hacks and read Tim’s disclaimer again !

6

It’s worth noting that if you turn this feature off, you also lose keyboard access. The Listbox will no longer respond to the up & down arrow keys. PopupMenu will not allow you to open it with a space bar.

Keep this in mind if you have any users who don’t like to or can’t use a mouse.

7

alternatively, you can try to remove just the visual part by adding a CSS like

input[type="button"]:focus { outline: none }
but this is not recommended: and not a problem of Xojo: <https://xojo.com/issue/31007>