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

html-css08

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

通常来说js无法通过css美化的,js偏向于逻辑算法、动态交互类的。css的美化功能主要是针对html的,与js有也是间接的关联,比如通过js给html标签动态添加一些css样式,或者给html标签动态添加具有css样式的类名等。

css权威指南

html与xhtml权威指南

css禅意花园

css那些事

超越css

css web 高级解决方案

无懈可击的web设计

css网页布局实录(李超著)

变幻之美(52css群主著)

CSS彻底研究

精通CSS+DIV网页样式与布局