《一个很不错的CSS改写的大表单文本框和搜索按钮组》要点:
本文介绍了一个很不错的CSS改写的大表单文本框和搜索按钮组,希望对您有用。如果有疑问,可以联系我们。
先看效果图:
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);
}
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。