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

html-css09

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

如何使用bootstrap动态生成输入框

首先，我们将这款日期控件下载下来。百度bootstrap日期控件即可。

bootstrap的日期控件

将下载好的日期控件的css、js引入自己的文件中。

在这里需要引入的文件有：

bootstrap.min.css（含有bootstrap 所有css）

bootstrap-datetimepicker.min.css（重要，这就是日期控件所需的样式表）

jquery-1.8.3.min.js（其他版本的jquery也可以）

bootstrap.min.js（含有bootstrap 所有js）

bootstrap-datetimepicker.js（重要，这就是日期控件所需的js）

locales/bootstrap-datetimepicker.fr.js（重要，这里是日期控件初始值）

bootstrap的日期控件

bootstrap的日期控件

bootstrap的日期控件

将所有文件引入完成后，就开始设置日期控件吧。

这是第一种样式。当然，你可以只要input就可以了。

css没法控制里面输入的字数的，只能控制文本框的宽度，高度之类的，即外观。

可以用 input 里面自带的属性 maxlength="10" 来控制其输入最多数，或者其他函数来限制。。。