Highlighted

required popup on form - mobile how to style it?

Explorer ,
May 16, 2020

Copy link to clipboard

Copied

image0.png

 On mobile devices the 'required popup panel' photo above the text is not centred correctly - its ok on a desktop computer. Not sure how to access this via CSS to correct alignment test error ??

 

<!DOCTYPE html>
<html>
<body>

<h1>The input required attribute</h1>

<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit">
</form>

</body>
</html>

 

 

Hope you can help?

 

Tim

 

Views

745

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

required popup on form - mobile how to style it?

Explorer ,
May 16, 2020

Copy link to clipboard

Copied

image0.png

 On mobile devices the 'required popup panel' photo above the text is not centred correctly - its ok on a desktop computer. Not sure how to access this via CSS to correct alignment test error ??

 

<!DOCTYPE html>
<html>
<body>

<h1>The input required attribute</h1>

<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit">
</form>

</body>
</html>

 

 

Hope you can help?

 

Tim

 

Views

746

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 16, 2020 0
LEGEND ,
May 16, 2020

Copy link to clipboard

Copied

I dont think you can alter the position, 'required' is baked into the browser l believe. You have much more control if you build your own validation.

 

Edited: On investigation looks like you can style the 'required' form attribute. Ive never tried it but just google, it looks reasonably simple to implement but how effective it is cross browser l have no idea.

 

Edited: No, after making some tests it appears you can only style the input field associated with the 'required' attribute but not change the appearance of the bubble pop-up, that is handled by each particular browser.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 16, 2020 1
Adobe Community Professional ,
May 16, 2020

Copy link to clipboard

Copied

Don't sweat the small stuff you can't control.  Form styles in general are controlled by the browser's internal programming.  Each browser styles them differently as shown in my screenshot.

 

image.png

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 16, 2020 1
Adobe Community Professional ,
May 16, 2020

Copy link to clipboard

Copied

Adding to the other two replies, you could always use the Bootstrap library, this will save a lot of time and anguish.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 16, 2020 1