如果前面的章节比较扎实，则本教程非常简单. 让我谈谈下面的文本框. 文本框和文本字段都可以使用css进行美化. 例如，更改边框，颜色，添加背景色，背景图像等. 请参见下面的示例:

.text1 {border: 1px solid#f60;颜色: #03C;}

.text2 {border: 2px solid#390;宽度: 200像素；高度: 24像素； font-size: 16px; font-weight: 粗体;行高: 1.6;}

.text3 {border: 2px solid#C3C;高度: 20px；背景: url(icon9.gif)正确3px不重复；}

.text4 {border: 2px solid#F60;宽度: 150像素；高度: 29像素； font-size: 16px;行高: 1.6；背景: url(bg_9.gif)0 0不重复；}

这四个样式表分别对应于第二，第三，第四和第五行形式. 第一行是文本框的默认样式. 第二行设置边框样式和字体颜色；第三行设置边框，宽度和高度，字体大小和线条高度的样式；第四行设置边框并增加背景颜色和背景图像；第五行添加了gif背景图像，看起来更加生动，并且不再重复具体步骤. 让我们看一下文本字段的样式设置:

area {border: 1px solid#F90;溢出: 自动；背景: #fff网址(bg_9_1.gif)右下无重复；宽度: 99％;高度: 100像素；}

上图中的第一个是默认的文本字段样式，第二个是设置边框，宽度(以百分比表示)，高度和场景图片. 溢出: 自动定义当内容不超过当前文本字段的高度时不显示滚动条. 好的，运行下面的代码以查看两者的效果

这是默认样式

这是为了更改边框样式和文本颜色

这是一种更改边框并设置高度，宽度和字体大小的样式

这是添加背景图片的示例，您也可以将其放在左侧

这是作为gif添加的背景图片

第二，使用图片美化按钮

The

按钮也是网页中的常见元素，但是默认样式有时与页面的整体效果不一致. 它需要美化它. 其样式设置与文本框完全相同. 以下是三个示例来说明:

'>

'>

三，更改下拉列表样式

下拉列表(菜单)是每个人最讨厌的元素之一. 由于它对许多样式都无效，因此在页面上显示非常难看，并且它始终位于IE6的顶层，从而导致许多无法阻止它的弹出层(该死的IE6)，因此用户对页面的检查大大减少了，因此一些设计者想出了许多方法来改变这种情况.

下拉列表的背景样式和宽度样式在IE6下生效，但大多数无效. IE8增加了对边框和高度的支持. 但这似乎与我们的要求相去甚远，因此我必须寻找其他方法. 首先看下面的三个数字，相同的代码显示了IE6，FF，IE8下的区别.

'>

'>

请选择一个项目:

看看谁可以阻止我

三种浏览器中的显示有所不同，因此最好使用其他方法或使用默认样式. 在基础上，如果它在IE6下被阻止，则浮动层可用作iframe，因为下拉列表不会在iframe上方运行. 美化需求较高的用户可以使用div模拟替换下拉列表.

四html文本框背景颜色，使用标签来增强用户体验

标签标签经常被所有人忽略. 合理使用将改善页面的用户体验. 我们可以将标签标签用于表单的描述文本，以便当用户单击文本时html文本框背景颜色，光标位于表单上

如上所示，当鼠标单击名称文本时，光标将位于后面的文本框中；单击男性和女性文本也将选择相应的选项；同样，复选框和文本字段相同.

本文来自电脑杂谈，转载请注明本文网址：

http://www.pc-fly.com/a/jisuanjixue/article-227427-1.html