0

I am developing a mobile app in worklight 6.1 with one textbox and a textarea. I need to remove the orange outline hightlight on focus in android devices so I have tried all the codes which is written in: Disable orange outline highlight on focus".

In IBM Worklight 6.0 this works:

textarea:focus, input:focus{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
    -webkit-user-modify: read-write-plaintext-only;
}

I have tried the same code with IBM Worklight 6.1, but it doesn't work.

This is my HTML code:

<div>
    <input type="text"/>
    <textarea>
    </textarea>
</div>

The hightlight appears for a fraction of seconds in 6.1.

After adding the below code which is the answer given by @Ilya am getting the same output:

enter image description here

Community
  • 1
  • 1
Karthik Sivakumar
  • 106
  • 12

3 Answers3

3

This is the working code. Tested in devices[Samsung S Duos, Sony Xperia M & Samsung Tab II] with IBM worklight 6.0 & IBM Worklight 6.1.

textarea:focus, input:focus, input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-modify: read-write-plaintext-only; 
    border: none !important;
    margin: none !important;
}
dhineshsundar
  • 112
  • 1
  • 10
0

Need turn off outline before focusing on the Input

textarea, input{
    outline: none !important;
}
Ilya
  • 49
  • 4
0

See this Worklight 6.1.0-based project: Disable Focus Rings in Android

In it I have used the following CSS rules:

textarea, input {
    /* Deals with Android 4.x */
    outline: none;

    /* Deals with Android 2.x */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some other Androids */
}

When focusing on either a textarea or an input field of type "text" in a Nexus 5 device running Android OS v4.4, the focus ring is not displayed, not even for a fraction of a second:

enter image description here

If this is not working for you, then you have some other CSS preventing from the CSS rules to be applied...

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • I have downloaded the project which you shared[Disable Focus Rings in Android]. I imported into workspace and tested with Samsung S Duos, Sony Xperia M and Samsung Tab II but the result is same. Can this be an issue with Worklight studio Developer edition 6.1? – dhineshsundar Feb 13 '14 at 09:33
  • No it cannot because this is CSS, Worklight is not the implementor of CSS. This is related to specific devices. As you can see it is working OK with Nexus 5. I do not have the devices you have listed, so I cannot test on them. Are you sure you are not referring to PASSWORD input field? – Idan Adar Feb 13 '14 at 09:38
  • @IdanAdar the problem was specifically said that the outline comes during focus of the input field.How can you expect a css code without `:focus` to work. I have downloaded yours and tested since i am amazed to see your code. But unfortunately it didnt work for me. Do you have highlight during normal times. – Kawinesh S K Feb 13 '14 at 10:52