效果图：
html代码：
<!DOCTYPE html><head><title></title></head><body><!--定义输入框和按钮--><input placeholder="关键字" class="searchInput" </input><input type="button" class="searchBtn"></input><!--开始定义样式--><style>/*设置输入框样式*/.searchInput { ???????position:absolute; ?????????????????/*使用绝对定位*/ ???????margin-left:200px; ????????????????/*调整位置*/ ???????width:300px; ?????????????????????/*设置宽度*/ ???????height:34px; ????????????????????/*设置高度*/ ???????padding:2px 10px; ??????????????/*内边距*/ ???????font-family:"宋体"; ????????????/*设置字体*/ ???????font-size:16px; ??????????????/*设置字体大小*/ ???????border:1px solid #f98e37; ???/*设置边框大小、样式、颜色*/ ???????border-radius: 4px 0 0 4px; /*设置边框四个圆角*/}/*设置输入框聚焦时样式*/.searchInput:focus { ???????border-color:#51c6ea;}/*设置按钮样式*/.searchBtn { ???????position:absolute; ?????????????????????????????/*使用绝对定位*/ ???????margin-left:514px; ????????????????????????????/*调整位置*/ ???????width: 50px; ?????????????????????????????????/*设置宽度*/ ???????height: 40px; ???????????????????????????????/*设置高度*/ ???????border-style:none; ?????????????????????????/*取消按钮边框样式*/ ???????border-radius: 0px 9px 9px 0px; ???????????/*设置边框的四个圆角*/ ????????????????????background: url(search.png) repeat center;/*设置按钮背景图片、平铺、居中*/}</style></body></html>2017-09-29 10:15:42
CSS组合设计输入框和按钮生成自定义关键字查询栏
原文地址：http://www.cnblogs.com/Mauno/p/7609806.html