请问这个效果怎么实现的（简单网页前台）

0 0

请问这个效果怎么实现的（简单网页前台）5

本来代码

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

在网页中的效果：

但现在他显示的效果是：

感觉这个是用css改的吧？具体怎么改？
问题补充：
谢谢！请问这个效果是怎么搜索出来的，什么关键词，我想自己google下，但不知道搜啥
问题补充：
其实就是
border-bottom:1px solid #005aa7; /* 下划线效果 */
border-top:0px;
border-left:0px;
border-right:0px;

入门技术

2009年7月23日 09:45

zhaixoahu
124
0 0 0

查看图片附件

4个答案按时间排序按投票排序

0 0

采纳的答案

网上又找了个例子..供参考...

<!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>

2009年7月23日 09:56

Rowen
1062
0 0 0

添加评论

0 0

google:
css input 文本下划线

2009年7月23日 10:12

Rowen
1062
0 0 0

添加评论

0 0

实际上就是把input text的border 上,左,右的border置0
再把border-bottom,改改..

2009年7月23日 10:04

Rowen
1062
0 0 0

添加评论

0 0

在样式里用下面这个就行了..颜色自己去掉..

<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>

2009年7月23日 09:54

Rowen
1062
0 0 0