• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

required popup on form - mobile how to style it?

Explorer ,
May 16, 2020 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

1.6K

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
community guidelines
LEGEND ,
May 16, 2020 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.

Votes

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
community guidelines
Community Expert ,
May 16, 2020 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Community Expert ,
May 16, 2020 May 16, 2020

Copy link to clipboard

Copied

LATEST

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

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines