:focus CSS not loading - Webkit

[bcusick]

Hey Guys,

I have an issue that’s driving me crazy. I want to prevent the focus ring on an uneditable HTML area.

When I create a simple solution (no services, no bootstrap, no nothing) using the same style - it’s fine.

When I have a more complex project - the browser is ignoring the CSS to take off the outline on focus. This happens only on Chrome and Opera (webkit) - not on Firefox, IE or Edge.

Here’s what happens when I click on the HTML area:

[attachment=1]focus-ring.png[/attachment]

Then I open up the inspector - and this is what I see:

[attachment=0]inspector.png[/attachment]

1. The class is clearly “svy-htmlarea” and I have added another class “noselect”;
2. I set the “focus” on to see what was going on;
3. You can see it picked up my style on the svy-htmlview.noselect
4. The user agent stylesheet is not applied on the focus

Here’s the stylesheet:

.svy-body,
body {
	font-family: "Roboto","Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:300;
}

.svy-main-window-container
{
	background-color: #fff;
}


*:focus, *:selected {
	/* remove all the focus */
	outline: none !important;
	box-shadow: none !important;
}

.form-control:focus,
.svy-label:focus,
.svy-htmlview:focus,
.svy-textarea:focus {
	outline: none !important;
	box-shadow: none !important;
}

.svy-field {
	font-size: 14px;
}

.svy-field.noborder,
.svy-textarea.noborder,
.svy-label.noborder,
.svy-btn.noborder,
.svy-htmlview.noborder {
	border: 0px none;
	box-shadow: none;
	outline: none;
}

.svy-htmlview.noselect,
.svy-htmlview.noselect:focus {
	outline: none !important;
	box-shadow: none !important;
}

Anyone know what’s gong on?

Servoy 8.3.2

Web Packages Used:
Bootstrap Components
Bootstrap Extra Components
Idle Web Service
Block UI
Browser Fingerprint
Bootstrap 12grid layout

[bcusick]

After quite a few hours of frustration - I figured it out.

Eventhough the .svy-htmlview DID have no outline - the span AFTER THAT did have the outline.

ADDED:

.svy-htmlview span:focus{
     outline: none !important;
}

DONE and done!