码迷,mamicode.com
首页 > 其他好文 > 详细

如何制作透明的搜索框

时间:2016-04-24 00:37:05      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form { width: 1000px ; height: 600px; background-image: url("22.jpg"); background-position: -100px -200px; }
div { float: left; border: 1px solid black; background: lightgray; opacity: .5;}
input[type="text"] { border: none; margin-left: 5px; background: lightgray; opacity: .5; }
input[type="submit"] { border: none; background: none; background-image:url("fangdajing_07.png"); width: 30px; height:30px;
background-repeat:no-repeat; background-position: 2px 2px; }
input[value="登录"] { border:none; background: none; margin-top: 8px; margin-left: 10px; color: white;}
input[value="注册"] { border:none; background: none; margin-top: 8px; color: white;}
input[value="登录"]:hover { color: gray;}
input[value="注册"]:hover { color: gray;}
</style>
</head>
<body>
<form action="">
<div>
<input type="text" placeholder="请输入您想知道的内容"/>
<input type="submit" value="&nbsp;"/>
</div>
<input type="button" value="登录" />
<input type="button" value="注册" />
</form>
</body>
</html>

如何制作透明的搜索框

标签:

原文地址:http://www.cnblogs.com/shengliang74/p/5426085.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!