css设置input文本输入框样式

发布时间:2020-11-28编辑:脚本学堂
本文主要讲css如何设置input文本输入框样式的,可以参考一下。

下面看一下利用css设置 input文本输入框样式的例子
有关input的源码html代码。
 

复制代码 代码示例:
<div id="comment">
     <form id="commentform" method="post" action="post.php" enctype="multipart/form-data">
     
      <div id="input" >
         <label class="name" for="email"></label>
         昵称:
         <input  name="username" type="text" class="msginput" id="usernamecontent" value="" size="20" maxlength="30"  />
      </div>
       <div id="input" >
         <label class="email" for="email"></label>
         邮件地址:<input  name="email" type="text" class="msginput" id="useremailcontent" value="" size="20" maxlength="30"  />
      </div>  
       
                                我想对某某说:<textarea id="commentarea" class="msginput" name="content" ></textarea><br/>
                                <input type="submit" value="提交" class="msgsubmit" />
     </form>
 </div>
 

下面是css:
 

复制代码 代码示例:

.msginput{
width:300px;
border:none;
background:#432914;
margin:0 0 0 30px;
background:url(images/line.jpg) no-repeat bottom left;
color:#f5e2ca;
}

#input{

height:40px;
}
#commentarea{
height:100px;
overflow:auto;
}
.msgsubmit{
float:right;
border:none;
background:#8d653a;
height:28px;
width:54px;
margin:20px 60px  0 0px;
}
#commentname{
line-height:30px;
padding:0 0 0 15px;
color:#432914;
background:url(images/nameback.jpg) no-repeat top left;
height:36px;
width:90px;
display:block;
}

以上就是今天css教程的内容,希望对大家有所帮助。