码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-09-29 11:00:39      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:order   高度   使用   ack   es2017   取消   images   height   btn   

效果图:

技术分享

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组合设计输入框和按钮生成自定义关键字查询栏

标签:order   高度   使用   ack   es2017   取消   images   height   btn   

原文地址:http://www.cnblogs.com/Mauno/p/7609806.html

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