CSS对文本框的修饰
这是我们常用的文本框，第一个是普通的样式，第二个是只有背景颜色的文本框，第三个是把文本框的四个边变成黑色的样式，第四个是把上边框、左右边框定义与背景颜色的样式，像一个填空题：） 这是怎么实现的呢？下面我将依次介绍。
（1）普通文本框
代码如下：（实际上就是我们常用的）
<input type="text" name="email" size="15" maxlength="255">
（2）仅有背景的文本框
先在head部中加入如下代码：
<head>
<style>
<!--
.input{ BACKGROUND-COLOR:#dbe9f5; BORDER-BOTTOM:#ffffff 1px solid; BORDER-LEFT:#ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP:
#ffffff 1px solid; COLOR: rgb(0,0,0); FONT-SIZE: 9pt
}
//-->
</style>
</head>
然后在你有引用文本框的地方写上：
<input type="text" name="email" size="15" maxlength="255" class=input>
解释程序：在head中的代码中的红色地方，你大约都能看懂:BORDER-BOTTOM --- 文本框边框底边的颜色值，其他的依次是左边、右边、上边的颜色值。在这里将四个边的颜色值都设置成与网页同颜色的，因此当你把文本框的颜色设置成与边框不同的颜色时，就会显示出上面例子中第二个文本框的那中情况。应该注意的是当你想得到这样的效果时，你应注意把class=input写在上面（具体的意思你可以看看前面的内容）
（3）没有阴影的文本框
代码如下：
.input1{ BACKGROUND-COLOR:#ffffff; BORDER-BOTTOM:#000000 1px solid; BORDER-LEFT:#000000 1px solid; BORDER-RIGHT: #000000 1px solid; BOR
DER-TOP: #000000 1px solid; COLOR: rgb(0,0,0); FONT-SIZE: 9pt
}
<input type="text" name="email" size="15" maxlength="255" class=input1>
（4）填空式的文本框
.input2{ BACKGROUND-COLOR:#ffffff; BORDER-BOTTOM:#000000 1px solid; BORDER-LEFT:#ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP
: #ffffff 1px solid; COLOR: rgb(0,0,0); FONT-SIZE: 9pt
}
<input type="text" name="email" size="15" maxlength="255" class=input2>（5）透明度的文本框
.input{ border: 0px solid #ffffff;
BACKGROUND-COLOR:#dbe9f5;
COLOR: rgb(0,0,0);
FONT-SIZE: 29pt;
height: 39px;
width: 298px;
Opacity: 0.3;
}<input type="text" name="email" size="15" maxlength="255" class="input">（6）全透明的文本框
.input{ border: 0px solid #ffffff;
BACKGROUND-COLOR:transparent;
COLOR: rgb(0,0,0);
FONT-SIZE: 29pt;
height: 39px;
width: 298px;
}
<input type="text" name="email" size="15" maxlength="255" class="input">