《一个很不错的CSS改写的大表单文本框和搜索按钮组》要点:
本文介绍了一个很不错的CSS改写的大表单文本框和搜索按钮组,希望对您有用。如果有疑问,可以联系我们。
先看效果图:
HTML代码部分:
<div class=searchInputBox> <input class=input placeholder=请输入内容页网址,测试智能抓取......> <div class=btn button>开始爬取</div> </div>
CSS部分:
/*大搜索框*/ .searchInputBox { height: 62px; width: 810px; margin: 0 auto; border-radius: 6px; background-color: #ffffff; box-shadow: 0 5px 20px 0 rgba(51, 177, 255, 0.15); border: solid 1px #33b1ff; } .searchInputBox .input { display: inline-block; border-radius: 6px; font-size: 16px; width: 615px; height: 60px; border: none; outline: none; font-weight: 300; padding-left: 20px; } .searchInputBox .btn.button { height: 60px; } .searchInputBox .btn { display: inline-block; width: 190px; font-size: 18px; cursor: pointer; position: relative; box-shadow: 0px 2px 7px 0px rgba(0, 0, 0.09); text-align: center; text-decoration: none; color: #fff; line-height: 50px; border-radius: 0 5px 5px 0; background-color: #33b1ff; float: right; } .searchInputBox .button { background-image: linear-gradient(#33b1ff, #33b1ff), linear-gradient(to bottom, #17c5ff, #11c0fa), linear-gradient(#11c4ff, #11c4ff); }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。