Mottie
{a} button doesn't allow to change its color
Hi all,
I've been working with virtual-keyboard for sometime and just realised the {a} button doesn't allow to change its color property through CSS. However, all other buttons, {accept} included, allow me to change its color property.
This issue is even weirder because it only seems to happen when i access through mobile devices, not from computer. Even the icon from {a} changes, and i'm pretty much sure it's not my fault here since the project consists of a basic create-react-app and this library.
Can you give it a look or guide me on how to solve this?
Hi @elPandaFriki!
Hmm, I'm not sure why you can't style the {a} button. There isn't anything different between it and the {accept} button besides the text. You can alter both the {a} and {accept} text using the display option.
You can also target the specific button with the class ui-keyboard-accept to alter its appearance. In this demo I used the data-pos attribute selector only because I added both types of accept button.
Please also check out the other themes (non-jQuery UI) for ideas.
Oh, and I just remember that more specific css is applied to the accept button when validation is enabled. Maybe you need a more specific selector?
It seems so a specific selector should be added.
I've been trying what you said about using the {accept} button with a display of "✔" and it still doesn't work. The weird behaviour now is that the {accept} button changes its text color when it displays letters, but not for "✔".
Hmm, I know that Windows sometimes replaces unicode symbols with actual images, so maybe that's it? You can also add an svg to the display option.
Oh, it seems i forgot to add this info: The issue is happening on Linux (Ubuntu 16.4) and Android 9.0, not on Windows nor Mac.
I'll try with an svg and work from there.
Okay, so this issue has been solved.
As a quick note, the way to use custom native characters is through unicode ( i.e. \u2713 ) and not amplified characters ( "✔" ) as I was doing.