Home/ Questions/Q 8427027
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T04:41:10+00:00

I was playing with the pattern attribute and, of course, attempted to submit the

  • 0

I was playing with the pattern attribute and, of course, attempted to submit the form with a string that deliberately did not match the required pattern, given the HTML:

<form action="#" method="post">
    <input type="text" pattern="[A-Z]{2,3}" />
    <button type="submit">Submit</button>
</form>

JS Fiddle demo.

I attempted to submit with 1, which of course resulted in error-handling by the browser (Chrome 21):

I tried to right-click the pop-up, and ‘inspect element,’ but so far as the Web-developer tools were concerned I seemed to be inspecting the input element (which makes sense, I suppose), rather than the pop-up dialogue. So, I was wondering: is it possible to access/interact with this dialogue via JavaScript (for responsive enhancements) or by CSS (for styling)?

The main goal would be to offer high-contrast alternatives for user-enhancements, or simply pop-ups consistent with a site’s styling and colour-schemes.

Edited to link to MDN for compatibility information:

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It is possible to style the popup, but support is limited and only works in webkit based browsers. As for the other browsers, there may be similar psuedoselectors that you can use, but I was not able to find them.

    It boils down to being able to find/know the DOM structure of those popups, and then adding CSS that will modify them. After all, they’re just DOM elements.

    example: http://jsfiddle.net/zbwJP/1/

    documentation

    • 0