文本框取下划线

Rowen

浏览: 83372 次
性别:
来自: 福州

最近访客更多访客>>

SZKJR

xiehao1020

Marriaging

javalucky

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

CSS XHTML HTML

问题：http://www.iteye.com/problems/21336

引用

A:<input name='an[61_1]' type='text' class='style5' size='15' value=''>

A:<input name='an[61_1]' type='text' class='style5' size='15' value=''>
在网页中的效果：

但现在要显示的效果是：

感觉这个是用css改的吧？具体怎么改？

CSS 样式:

<style type='text/css'>   
  .style5{   
     background:#ffffff;border-bottom-color:#ff6633; border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px; solid #ff6633; color: #000000; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}   
input.buttonface{BACKGROUND: #ffcc00; border:1 solid #ff6633; COLOR: #ff0000; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal   
  }   
  </style>

网上下了个完整示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml" >    
<head>    
<title>只显示下划线的文本框，像文字一样的按钮</title>    
<style type="text/css"><!--    
body{    
background-color:#daeeff; /* 页面背景色 */    
}    
form{    
margin:0px; padding:0px;    
font:14px;    
}    
input{    
font:14px Arial;    
}    
.txt{    
color:#005aa7;    
border-bottom:1px solid #005aa7; /* 下划线效果 */    
border-top:0px;    
border-left:0px;    
border-right:0px;    
background-color:transparent; /* 背景色透明 */    
}    
.btn{    
background-color:transparent; /* 背景色透明 */    
border:0px; /*border:0px solid #005aa7;边框取消 */    
cursor:pointer;    
}    
--></style><style type="text/css" mce_bogus="1"> body{    
background-color:#daeeff; /* 页面背景色 */    
}    
form{    
margin:0px; padding:0px;    
font:14px;    
}    
input{    
font:14px Arial;    
}    
.txt{    
color:#005aa7;    
border-bottom:1px solid #005aa7; /* 下划线效果 */    
border-top:0px;    
border-left:0px;    
border-right:0px;    
background-color:transparent; /* 背景色透明 */    
}    
.btn{    
background-color:transparent; /* 背景色透明 */    
border:0px; /*border:0px solid #005aa7;边框取消 */    
cursor:pointer;    
}</style>    
</head>    
<body>    
<div>    
用户名:    
<input type="text" name="name" id="name" class="txt" />   
    
密　码:    
<input type="password" name="pwd" id="pwd" class="txt" />   
    
<input type="submit" name="btnSubmit" id="btnCancel" value="重置" class="btn" />    
<input type="submit" name="btnSubmit" id="btnSubmit" value="提交" class="btn" />    
</div>    
</body>    
</html>