文本框取下划线

最新推荐文章于 2021-10-26 11:07:24 发布

原创最新推荐文章于 2021-10-26 11:07:24 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #XHTML #HTML

HTML 专栏收录该内容

3 篇文章

订阅专栏

问题：[url]http://www.iteye.com/problems/21336[/url][quote]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=''>
在网页中的效果：
[img]http://dl.iteye.com/upload/attachment/144069/110a58c5-6bda-39d3-bb07-d3fbdf7cecd5.bmp[/img]

但现在要显示的效果是：
[img]http://dl.iteye.com/upload/attachment/144071/938d90b1-5ace-34d1-be38-5d510d1f7d26.bmp[/img]
感觉这个是用css改的吧？具体怎么改？[/quote]
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>