CSS样式表学习实例，表单文本框的简单美化

发布时间：2018-09-12 17:54:27 所属栏目：专访来源：站长网

导读：学好了CSS，美化各种各样的表单或输入框、按钮、表格都轻松容易，本示例就是美化表单中的输入框以及按钮的，将系统默认的灰色表单组件变成符合你网页风格或者说是你想要的风格，请先运行一下代码，浏览一下效果吧。演示： !DOCTYPE html PUBLIC -//W3C//D

　　学好了CSS，美化各种各样的表单或输入框、按钮、表格都轻松容易，本示例就是美化表单中的输入框以及按钮的，将系统默认的灰色表单组件变成符合你网页风格或者说是你想要的风格，请先运行一下代码，浏览一下效果吧。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS样式表学习实例，表单美化</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style> form { border: 1px dotted #aaaaaa; padding: 3px 6px 3px 6px; } input.txt{ color: #00008B; background-color: #ADD8E6; border: 1px inset #00008B; width: 200px; } input.btn { color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; padding: 2px 4px 2px 4px; } </style> </head> <body> <form method="post" action="fields.html"> <p>Are you Know Liehuo.Net? <br /><input type="text" name="name" id="name" class="txt" /></p> <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn" /></p> </form> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!