html - Floating label on top inputs -
i trying float label on top of input it's not working correctly? maybe messed css? appreciated, thanks!
heres looks @ moment: http://prntscr.com/37hw30
html:
<form id="loginformitem" name="loginformitem" method="post" style="float:right"> <label for="username">username</label> <input type="text" name="log_username" class="logintext" id="username" placeholder="username" style="margin-left:100px"> <label for="password">password</label> <input type="password" name="log_password" class="logintext" id="password" placeholder="password"> <button type="submit" class="loginbutton" name="login" >login now</button> </form>
css:
.logintext { margin-right: 10px; border: 2px solid rgba(0,0,0,0); border-radius: 2px; padding: 2px 2px 3px 2px; font-size: 13px; color: #222; } form label { font-size: 13px; font-weight: bold; color: #a4c0d7; }
you can wrap label
& input
<p>
or <span>
displayed inline-block
.
input
can displayed block
break line.
html
<form id="loginformitem" name="loginformitem" method="post" > <span> <label for="username">username</label> <input type="text" name="log_username" class="logintext" id="username" placeholder="username" > </span> <span> <label for="password">password</label> <input type="password" name="log_password" class="logintext" id="password" placeholder="password"> </span> <button type="submit" class="loginbutton" name="login" >login now</button> </form>
css
form span { display:inline-block; margin:0 50px; vertical-align:bottom; } span input { display:block;/* if want submit under , form input {} include */ } form { float:right; /* demo */ border:solid; border-radius:1em; padding:0.25em; }
turns demo
Comments
Post a Comment