如何用CSS美化输入框的方法

html-css011

如何用CSS美化输入框的方法,第1张

为了达到更好的交互效果，提高用户友好度，对文本框输入框之类的美化工作是很必要的。一般的美化工作可以直接通过使用CSS完成，方法也十分简单，如下：1、首先制作一张输入框的背景图，如上图所示。2、添加按钮的Html代码：<input type=button class=Selectbg3、然后用css代码将它定义：<stylebody{font-size:12px }.Selectbg{border:nonewidth:150px height:20px background-image:url(image.gif) text-align:leftline-height:20px }</style在写CSS代码的时候要注意，如果背景图中带边框，一定要将输入框的边框去掉，否则会显示默认边框；其次还要将高度和行高定义好，否则点击输入框后文字的位置会很难看。

<input

type="submit"

name="button"

id="button"

value="提交"

style="

border:none

height:20px

width:100px

background:url(img134.tif)"

/>

在style中加入css就可以，需要注意的一点是，加背景图片的时候，边框按自己需求显示，默认是有边线的，

即border:的设置