php文本框怎么设置好看,一个很不错的CSS改写的大表单文本框和搜索按钮组

《一个很不错的CSS改写的大表单文本框和搜索按钮组》要点：

本文介绍了一个很不错的CSS改写的大表单文本框和搜索按钮组，希望对您有用。如果有疑问，可以联系我们。

先看效果图：

HTML代码部分：

开始爬取

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, 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);

}