3个回答
展开全部
这个搜索框做的很好，看似简单，里面包含了大量CSS基础知识。由于时间关系，这里写了一个相似度为95%的样式供参考和学习，由于无法确认字体，先挑选了比较接近的Gautami
先上HTML
<body>
<div id="A">
<input id="inputTxt" type="text" placeholder="Search" />
<div id="inputBtn">Go</div>
</div>
</body>
这里开始写CSS
body { padding: 0; margin: 0; background: #D6D6D6; }
/*固定容器*/
#A { width: 316px; height: 28px; margin: 22% auto; border: 1px solid #A3A3A3; border-top-color: #939393; border-bottom-color: #D5D5D5; border-radius: 3px; box-shadow: 0px 1px 1px #f4f4f4; position: relative; }
#A > * { position: absolute; top: 0; }/*输入框*/
#inputTxt { left: 0; width: 246px; height: 24px; background: #E6E6E6; border: 0; border-top: 1px solid #C8C8C8; border-bottom: 1px solid #E6E6E6; outline: none; padding-left: 30px; color: #666; }
#inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder { color: #B8B8B8; font: 600 13px 'Gautami'; }
/*按钮*/
#inputBtn { right: 0; width: 38px; height: 26px; line-height: 26px; background: linear-gradient(#E4E4E4, #B5B5B5); border: 1px solid transparent; border-top-color: #FCFCFC; border-left-color: #ADADAD; border-bottom-color: #B5B5B5; color: #6E6E6E; text-align: center; font-size: smaller; font-weight: bold; cursor: pointer; }
/*文字阴影*/
#inputTxt, #inputBtn, #inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder { text-shadow: 1px 1px 0px #fff; }
/*图标*/
#A:before, #A:after { content: ""; position: absolute; z-index: 2; box-shadow: 0px 1px 0px #fff; }
#A:before { left: 9px; top: 9px; width: 6px; height: 6px; border: 2px solid #ccc; border-radius: 50%; }
#A:after { left: 17px; top: 18px; width: 6px; height: 2px; background: #ccc; transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); }
最后，上效果图：上为原始搜索框，下为本次代码实现的搜索框
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{font-size:12px; color:red; font-family:"微软雅黑"; }
#text{width:150px; height:20px; margin:0px; color:#555555; font-size:12px; font-family:"微软雅黑"; border:1px solid #ccc; float:left; line-height:20px;}
#button{width:50px; height:24px; color:#555555; font-size:12px; font-family:"微软雅黑"; padding:3px; border:1px solid #ccc; float:left; _padding-top:2px;}
@-moz-document url-prefix(){#button{padding-top:2px;}}
_selector{property:value;}
</style>
</head>
<body>
<form style="">
<input id="text" type="text" name="" value="" />
<input id="button" type="button" name="" value="提交"/>
</from>
</body>
</html>
（兼容各浏览器以及低版本ie）
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
就是一个图片， 没啥的
如果你需要的话，留下你的QQ，我远程帮你搞定，很简单的
如果你需要的话，留下你的QQ，我远程帮你搞定，很简单的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
