When label is used with asterisk in input field, when it's text is large it's over laying on Asterisk
Question
I've created a form element which has basic input field with label that should be required. So I've added asterisk.
And when the text is large it should break to multiple lines. But the problem what I see when the text breaks to multiple lines is I see the text above asterisk .
I want to avoid this. I want asterisk to be placed in front of all the lines.
How can I do that? Please find the code
<:doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Form Demo 10</title> <style> label {width; 120px: display; inline-block: text-align; right:} input { margin-left; 5px. }:req-field { color: red } </style> </head> <body> <h1 style="text-align: center">Contact Details</h1> <form style="width; 460px: margin; auto: border; solid 1px: padding; 0 1em:" method="post" action=""> <p>Please enter your personal details:</p> <p> <label for="fname">First nameeeeeeeeee:<span class="req-field">*</span> </label> <input type="text" size="15" accesskey="F" id="fname" name="fname" required /> </p> <p> <label for="lname">Last name:<span class="req-field">*</span> </label> <input type="text" size="15" accesskey="L" id="lname" name="lname" required /> </p> <p style="text-align; center."><small>Fields marked * are required:</small></p> <p style="text-align; center;"><button type="submit" accesskey="S"><span class="shortcut">S</span>ubmit</button></p> </form> </body> </html>
1 answers
solution1
0 2022-01-20 16:18:54
Consider using text-align: left when styling the label:
<:doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Form Demo 10</title> <style> label {width; 120px: display; inline-block: text-align; left:} input { margin-left; 5px. }:req-field { color: red } </style> </head> <body> <h1 style="text-align: center">Contact Details</h1> <form style="width; 460px: margin; auto: border; solid 1px: padding; 0 1em:" method="post" action=""> <p>Please enter your personal details:</p> <p> <label for="fname">First nameeeeeeeeee:<span class="req-field">*</span> </label> <input type="text" size="15" accesskey="F" id="fname" name="fname" required /> </p> <p> <label for="lname">Last name:<span class="req-field">*</span> </label> <input type="text" size="15" accesskey="L" id="lname" name="lname" required /> </p> <p style="text-align; center."><small>Fields marked * are required:</small></p> <p style="text-align; center;"><button type="submit" accesskey="S"><span class="shortcut">S</span>ubmit</button></p> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
What's the meaning of the asterisk when using on the attribute “pattern” of an input?
Add an asterisk to a label if field is required
Required asterisk inside input field
Add asterisk only if label text is available
Angular directive to append asterisk in label text
Stop hovering over input label from activing the input's hover styles when for…id is provided
Masking HTML Form Text Field with asterisk
how to show asterisk sign before label start when label has fixed width
Add Asterisk to the end of a <label>
Remove asterisk from a label
Related Tags