setCustomValidity position changes when input width increase

Question

I've got two inputs with setCustomValidity.

In the first input setCustomValidity position is in left position, in other words, is in correct position, like in the below image:

but in the another one the property setCustomValidity tooltip appears in the middle, like in the below image:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TEST</title>
</head>
<body>

    <form>
        <label>Code:</label>
        <input type="text" maxlength="3" required oninvalid="this.setCustomValidity(); "/>

        <label>Description:</label>
        <input type="text" maxlength="3" required oninvalid="this.setCustomValidity();" style="width: 500px;"/>

        <button type="submit">Submit</button>
    </form>

</body>
</html>

How can I put tooltip on the left position, Like in the first image?

You'll need to add some code so we can see what the issue is. From the picture, a guess would be .myform label { text-align: left; } — Electron, Sep 11 '18 at 14:02
@InvariantChange I'm so sorry, for forget the code, i'll tried your solution, but not works. — DevRyu, Sep 11 '18 at 14:10
@InvariantChange There is all code, I'm not using external css. Only HTML — DevRyu, Sep 11 '18 at 14:57

score 2 · Accepted Answer · answered Sep 11 '18 at 15:45

You Can't Change it

For whatever reason, we developers (or more likely our designer colleagues) have a deep-seated desire to style these things. But unfortunately we can’t, as zero browsers provide styling hooks that target these bubbles. Chrome used to provide a series of vendor prefixed pseudo-elements (::-webkit-validation-bubble-*), but they were removed in Chrome 28.

So what’s a developer to do? Well, although browsers don’t allow you to customize their bubbles, the constraint validation spec does allow you to suppress the browser’s bubble UI and build your own. The rest of the article shows you how to do just that.

Source

Remove & Replace

However, You can remove it and use something else instead.

See: How to remove validation-bubble-message in form validation

An alternative solution, use an alert

See: Invalid Alert

Perfect, using "alert" make the solution easy to build my own tooltip. — DevRyu, Sep 11 '18 at 17:32

setCustomValidity position changes when input width increase

1 Answers1

You Can't Change it

Remove & Replace