为了达到更好的交互效果，提高用户友好度，对文本框输入框之类的美化工作是很必要的。一般的美化工作可以直接通过使用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代码的时候要注意，如果背景图中带边框，一定要将输入框的边框去掉，否则会显示默认边框；其次还要将高度和行高定义好，否则点击输入框后文字的位置会很难看。中文字符的中线和英文字符的中线定义是不一样的，你在设置输入框与文本居中对齐的时候，最好将文本的字体样式设置成英文字体，比如font-family:verdana这样有助于解决中线问题。然后再给输入框添加 vertical-align:middle样式。
注意，由于涉及到中线问题，所以字号会影响对齐的效果。例子就不举了，你可以改变字号（12px、13px等）自己尝试一下。
使用css样式直接可以改变input的样式的，input属于行内替换元素height/width/padding/margin均可用，效果等于块元素。
工具原料：编辑器、浏览器
1、设置一个宽度是宽度500px，高度50px，边框是红色的input输入框的代码如下：
<body>
<input type="text" />
<style>
input{
width: 500px
height: 50px
border: 1px solid red
}
</style>
</body>
2、运行的效果如下图：
