How to change color of underline of Japanese and Chinese composition input text

Question

My team is developing a web application which allow users to enter text to filter data. The filter is invoked after users enter a character in a textbox.

We've found an issue that the filter is not invoked when Chinese users enter Chinese text by a keyboard layout "Microsoft Pinyin New Experience Input Style".

在此处输入图片说明

The root cause is the composition text is not confirm yet. Normally, browser will show black underline to let users know current state of their input.

在此处输入图片说明

However, my textbox is black and the users can't see the underline. So they thought the text is already entered.

Could anyone tell me how to change color of this underline, please?

Answer 1

Hi~ I'm not sure this is right way.

It would need some more css adjustments to prettified it.

However, hope it could help... it's very simple code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .invert {
            -webkit-filter: invert(100%);
            filter: invert(100%);
        }
    </style>
</head>
<body>
    <input type="text" class="invert">
</body>
</html>

How to change color of underline of Japanese and Chinese composition input text

Question

1 answers

solution1
0 2017-04-12 01:31:16

How to change color of underline of Japanese and Chinese composition input text

Question

1 answers

solution1 0 2017-04-12 01:31:16

solution1
0 2017-04-12 01:31:16