CSS组合设计输入框和按钮生成自定义关键字查询栏

效果图：

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

作者：YancyMauno
出处：http://www.cnblogs.com/Mauno/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。