简洁输入框样式

最新推荐文章于 2024-07-03 09:05:02 发布

软件工程小施同学

最新推荐文章于 2024-07-03 09:05:02 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签：输入框 css

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
	<title>CSS美化的漂亮搜索框</title>
	<style type="text/css"> 
body{ 
font: normal 100% 'Arial','Helvetica','Verdana',sans-serif; 
color: #333; 
} 
p { 
padding: 12px 0; 
margin: 0; 
font-size: .8em; 
line-height: 1.5; 
} 
form { 
margin: 0; 
} 
#search_box { 
width: 201px; 
height: 31px; 
background: url(http://files.jb51.net/demoimg/200912/bg_search_box.gif); 
} 
#search_box #s { 
float: left; 
padding: 0; 
margin: 6px 0 0 6px; 
border: 0; 
width: 159px; 
background: none; 
font-size: .8em; 
} 
#search_box #go { 
float: right; 
margin: 3px 4px 0 0; 
} 

input,button,select,textarea
{
      outline:none;
      -webkit-appearance:none;
}
textarea
{
     resize:none;
}
</style>
</head>
<body>
	<div id="search_box">
		<form id="search_form" method="post" action="#">
			<input type="text" id="s" value="Search" class="swap_value" />
			<input type="image" src="http://files.jb51.net/demoimg/200912/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" />
		</form>
	</div>
</body>
</html>

附上一点：如何清除浏览器自带的输入框样式

input,button,select,textarea
{
      outline:none;
      -webkit-appearance:none;
}
textarea
{
     resize:none;
}

http://www.jb51.net/css/22930.html
http://blog.sina.com.cn/s/blog_859df1330102v99m.html

软件工程小施同学

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录