0

I'm building a website using PHP and MySQL without any CMS or Framework. I will do all the code. Here is the login form that I'm working on and I would like to change the style for popup message, that is "Please fill out this field". I'm using Chrome.

Here is the form code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<form class="form-login" method="post">
    <h3>Enter Your Credentials To Login</h3>
    <div class="container-fluid">
        <div class="form-row">
            <div class="col-lg-4 mx-auto">
                <div class="input-group mb-1">
                    <input autocomplete="off" type="email" name="user-email" class="form-control" placeholder="Enter Your Email Address" required autofocus="" />
                </div>
                <div class="input-group mb-1">
                    <input autocomplete="off" type="password" name="user-pass" class="form-control" placeholder="Enter Your Password" autofocus="">
                </div>
                <button class="btn btn-block" type="submit"><i class="fas fa-sign-in-alt"></i> Login</button>
            </div>
        </div>
    </div>
</form>

I would like to know how to change the css for that popup like make the text, etc.

I did some research but I haven't found any final solution so far.

I'm talking about the popup when you click submit if the field is empty, not the input.

I have checked these posts and none of them helps.

HTML5 Required input styling

How do I style the HTML5 form validation error messages with CSS?

All of the solutions above are obsolete, outdated, over 8 years ago.

Thien Ngo
  • 35
  • 5
  • It's not duplicated. I have checked both links. It mentioned only how to style input field, not popup in HTML5 input field. This is the popup I'm talking about, please check the screen capture here: https://prnt.sc/ozo5sf – Thien Ngo Aug 30 '19 at 14:36
  • https://stackoverflow.com/questions/5249152/html5-required-input-styling https://stackoverflow.com/questions/5328883/how-do-i-style-the-html5-form-validation-error-messages-with-css None of solutions in both posts that you guys reported as duplicated work. Please consider to try the solution before marking this post duplicated. – Thien Ngo Aug 30 '19 at 14:42
  • You should consider explaining why those solutions didn't work for you so that we can help you find one that does. – Brad Sep 01 '19 at 04:15
  • I did, all of the solutions above are outdated, as you can see it was over 8 years ago. – Thien Ngo Sep 01 '19 at 04:24
  • You expect people just to guess/assume what your code looks like? Show us what you tried. Also, did you read all of the comments around alternatives of using your own validation pop-up? In any case, you should have just commented on the original question rather than duplicating it. – Brad Sep 01 '19 at 05:01
  • I edited the question, added the html code, I'm using bootstrap 4.3.1, and the input field with required attribute will popup the message. – Thien Ngo Sep 01 '19 at 16:32

0 Answers0