html - text display on mouse over field -
i making simple signup form of website. need display text line saying "manager or customer" should appear when place mouse on third field(type) of form. new these css things. sory if question odd need it.
<!doctype html> <html> <head> <style> body{ background: url("2.jpg"); background-size: cover; background-repeat: no-repeat; } div.transbox { width: 400px; height: 360px; margin: 30px 50px; background-color: #ffffff; border: 2px solid; border-radius: 25px; opacity: 0.8; filter: alpha(opacity=60); } span { display: none; border:1px solid #000; height:30px; width:290px; margin-left:10px; } input:hover { background-color: brown; } form:hover{ border-color: green; } h1 { text-align: center; } </style> </head> <center><body> <div class = "transbox"> <form method = post action = makeaccount.php> <p> <h1>make account here</h1> <br> <br> username <input type = text name = username> </p> <p> <br> userpass <input type="password" name = userpass> </p> <p> <br> type <input type= text name = type> </p> <br> <br> <input type =submit name="submit" value = "login"> </p> </form> </div> </body> </center> <br><br><br> <form action="home.html"> <input type="submit" style="width:100px; height:30px;" value="back"> </form> </html>
(1) mentioned in other answers, best use title attribute:
<input type="text" id="usertype" title="manager or customer" /> (2) next best thing use placeholder attribute, (as mentioned @rhumborl in comments):
<input type="text" id="usertype" title="manager or customer" placeholder="manager or customer" /> (3) alternatively, use span following input , show toggling display on hover and/or focus of input.
example (showing three):
label { display: inline-block; width: 84px; } span#typeprompt { display: none; } input#usertype:hover + span#typeprompt { display: inline; } input#usertype:focus + span#typeprompt { display: inline; }<label>username: </label><input type="text" id="username" /><br /> <label>password: </label><input type="text" id="userpassword" /><br /> <label>usertype: </label><input type="text" id="usertype" placeholder="manager or customer" title="manager or customer" /> <span id="typeprompt">manager or customer</span> <br />
Comments
Post a Comment