html 设置 文本框 背景 透明

  如此效果:

请看下面的CSS写法:

.box01{
   background-color : transparent;    /*背景色透明*/
   border-bottom : 1px  solid #cccccc;    /*文本框底部  宽度1像素,  实线,  颜色灰色 */
   border-right-width : 0px;   /*文本框的上,左,右 宽度都设为0  线型为无 */
   border-left-width : 0px;
   border-top-width : 0px;
   border-top-style : none;
   border-right-style : none;
   border-left-style : none;
   padding : 0px;
   margin : 0;
}

=========================分割线===============

如果想要文本框也透明就看看下面的例子吧

样式表:
<style type="text/css">
<!--
.byte { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; VERTICAL-ALIGN: middle; WIDTH: 2em; COLOR: #ffffff; HEIGHT: 1.2em; TEXT-ALIGN: right; BORDER-RIGHT-WIDTH: 0px
}
.byte2 { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; VERTICAL-ALIGN: middle; WIDTH: 4em; COLOR: #ffffff; HEIGHT: 1.2em; TEXT-ALIGN: left; BORDER-RIGHT-WIDTH: 0px
}
.phone { BORDER-RIGHT: #000000 0px solid; BORDER-TOP: #000000 0px solid; FONT-SIZE: 9pt; BACKGROUND: none transparent scroll repeat 0% 0%; OVERFLOW: hidden; BORDER-LEFT: #000000 0px solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 0px solid}
-->
</style>

文本框:
<INPUT class=byte readOnly size=2 value=0 name=byte>
<INPUT class=byte2 readOnly value="/80 Byte" name=byte_limit>
<TEXTAREA class=phone onkeypress=CheckMsg() onkeyup=CheckMsg() onfocus=CheckMsgValue(); onclick=CheckMsgValue(); name=sm_smsMsg rows=5 cols=16>欢迎留言</TEXTAREA>