用CSS美化输入框


网页设计中很重要的就是美化页面,我们这里主要以美化输入框为例,介绍一下css美化输入框的方法。在网页中需要插入很多表单、输入框、按钮、文本框之类的内容,它们是用户和网站交互所必不可缺少的元素。

为了达到更好的交互效果,提高用户友好度,对文本框输入框之类的美化工作是很必要的。

一般的美化工作可以直接通过使用CSS完成,方法也十分简单,如下:

 

1、首先制作一张输入框的背景图,如上图所示。

2、添加按钮的Html代码:
?

<input type="button" class="Selectbg">


3、然后用css代码将它定义:

<style>
body{font-size:12px; }
.Selectbg{ border:none; width:150px; height:20px; background-image:url(image.gif); text-align:left;line-height:20px; }
</style>

在写CSS代码的时候要注意,如果背景图中带边框,一定要将输入框的边框去掉,否则会显示默认边框;其次还要将高度和行高定义好,否则点击输入框后文字的位置会很难看。

简单三步,就完成了输入框的美化



相关阅读:
将XHTML CSS页面转换为打印机页面
CentOS 5.4中安装Oracle 10g的步骤
讲述Oracle UNDO表空间重建办法
redhat linux 通过yum自动升级
Ajax 超时检查脚本
RedHat9详细安装图解
IE6必然灭亡的最新6个理由
精通数据库系列之入门-技巧篇2
CSS+DIV设计实例:实现让多个DIV排列时居中
将oracle 9i备份文件导入oracle 8i的方法简介
JavaScript Dom编程:介绍学习书籍
不错的一篇VBS-JSCRIPT GETOBJECT理解
CSS教程:clip属性全知道
提升我们工作效率的几个Windows7新功能
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4