标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input框的focus美化效果</title> <link href="lt.css" rel="stylesheet" type="text/css"/> <style> ul{width: 260px;margin: 10px auto;} ul li{width:260px;height:60px;line-height: 60px;} input{ border: 1px solid #ccc; border-radius: 2px; color: #000; font-family: ‘Open Sans‘, sans-serif; font-size: 1em; height: 50px; padding: 0 16px; transition: background 0.3s ease-in-out; width: 100%; } input:focus { outline: none; border-color: #9ecaed; box-shadow: 0 0 10px #9ecaed; } .button{ -webkit-appearance: none; background: #009dff; border: none; border-radius: 2px; color: #fff; cursor: pointer; height: 50px; font-family: ‘Open Sans‘, sans-serif; font-size: 1.2em; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; transition: background 0.3s ease-in-out; width: 292px; } .button:hover { background: #00c8ff; } </style> </head> <body> <ul> <li> <input type="text" placeholder="用户名" autocomplete="on"/> </li> <li> <input type="text" placeholder="密码" autocomplete="off"/> </li> <li> <input type="text" placeholder="手机号码" autocomplete="off"/> </li> <li> <input type="text" placeholder="邮箱" autocomplete="off"/> </li> <li> <input type="submit" class="button" title="注册" value="注册"> </li> </ul> </body> </html>
效果图：
IT技术和行业交流群 417691667
标签：
原文地址：http://www.cnblogs.com/sun-rain/p/5785908.html
