У меня есть два входа с setCustomValidity.

В первом вводе позиция setCustomValidity находится в левой позиции, другими словами, в правильном положении, как на изображении ниже:

enter image description here

Но в другом случае всплывающая подсказка свойства setCustomValidity появляется посередине, как на изображении ниже:

enter image description here

<!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>

Как я могу поместить всплывающую подсказку в левую позицию, как на первом изображении?

1
DevRyu 11 Сен 2018 в 16:50

1 ответ

Лучший ответ

Вы не можете это изменить

По какой-то причине у нас, разработчиков (или, что более вероятно, у наших коллег-дизайнеров) есть глубокое желание стилизовать эти вещи. Но, к сожалению, мы не можем этого сделать, поскольку нулевые браузеры предоставляют хуки для стилизации, нацеленные на эти пузыри. Раньше Chrome предоставлял серию псевдоэлементов с префиксом поставщика (:: - webkit-validation-bubble- *), но они были удалены в Chrome 28.

Так что же делать разработчику? Что ж, хотя браузеры не позволяют настраивать свои пузыри, спецификация проверки ограничений позволяет подавить пользовательский интерфейс пузыря браузера и создать свой собственный. В оставшейся части статьи вы узнаете, как это сделать.

Источник


Удалить и заменить

Однако вы можете удалить его и использовать вместо него что-нибудь другое.

См .: Как удалить сообщение-пузырек проверки при проверке формы < / а>

Альтернативное решение: используйте alert

См. Недействительное предупреждение

2
Invariant Change 11 Сен 2018 в 15:45