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

html-css0277

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

设置css文件中text样式

首先打开操作软件这里用DW编辑工具：取一个css名字为text；

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title>效果区</title>

</head>

<body>

<style>

.text{ width:200px height:200px background:#09C color:#FFF font-size:18px font-weight:bold text-indent:2em text-align:left}

</style>

<div class="text">

    文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域文字区域

</div>

</body>

</html>

实现效果图如下：

详解：设置一个css样式取名：text，定义一个宽度与高度分别为200px。

其次设置一个背景颜色background:#09C

字体颜色为白色 color:#FFF

字体的大小为18xp：font-size:18px

设置字体为粗体：font-weight:bold

字体靠左对齐：text-align:left

字体首行缩进2个文字(2em)：text-indent:2em