首页 > 文章 > web前端 > CSS小例子(只显示下划线的文本框，像文字一样的按钮)_经验交流

CSS小例子(只显示下划线的文本框，像文字一样的按钮)_经验交流

WBOY原创: 2016-05-16 12:04:022126浏览

<title>只显示下划线的文本框，像文字一样的按钮</title> 
<style type="text/css"></style>
<style type="text/css" 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> 
 
 
<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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：浅谈href=#与href=javascript:void(0)的区别_经验交流下一篇：支持IE6 IE7 Firefox 的纯CSS的下拉菜单_经验交流

查看更多

CSS小例子(只显示下划线的文本框，像文字一样的按钮)_经验交流

相关文章