Css 使搜索框响应

我怎样才能使它具有响应性？我想把宽度从px改为%。但我没有得到同样的结果。我想保持大小，但我希望它是响应

.cf:before, .cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{zoom:1;}

.form-wrapper {
    width: 450px;
    padding: 15px;
    margin: 0 auto;
    background: #444;
    background: rgba(0,0,0,.2);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

.form-wrapper input {
    width: 330px;
    height: 20px;
    padding: 10px 5px;
    float: left;    
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    -moz-border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;      
}

.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    

.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}   

.form-wrapper button:hover{     
    background: #e54040;
}   

.form-wrapper button:active,
.form-wrapper button:focus{   
    background: #c42f2f;    
}

.form-wrapper button:before {
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.form-wrapper button:hover:before{
    border-right-color: #e54040;
}

.form-wrapper button:focus:before{
    border-right-color: #c42f2f;
}    

.form-wrapper button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

HTML:

搜寻

我没什么可说的了，所以我只添加这段文字，因为文字太少，我不想发布这个问题。提前感谢各位。

*，*：之前，*：之后{
框大小：边框框；
}
.cf:before.cf:after{content:；display:table；}
.cf:在{clear:both；}之后
.cf{zoom:1；}
.表格包装{
宽度：450px；
填充：15px；
保证金：0自动；
背景：#444；
背景：rgba（0,0,0,2）；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
-moz盒阴影：0 1px 1px rgba（0,0,0,4）插入，0 1px 0 rgba（255255,2）；
-webkit盒阴影：0 1px 1px rgba（0,0,0,4）插图，0 1px 0 rgba（255255,2）；
盒影：0 1px 1px rgba（0,0,0,4）插图，0 1px 0 rgba（255255,2）；
}
.表单包装器输入{
宽度：310px；
高度：40px；
填充：10px 5px；
浮动：左；
字体：粗体15px‘lucida sans’、‘trebuchet MS’、‘Tahoma’；
边界：0；
背景：#eee；
-moz边界半径：3px 0 3px；
-webkit边界半径：3px 0 3px；
边界半径：3px 0 3px；
}
.表单包装器输入：焦点{
大纲：0；
背景：#fff；
-moz盒阴影：0.2pxRGBA（0,0,0,8）插入；
-webkit盒阴影：0.2pxRGBA（0,0,0,8）插图；
盒影：0.02×rgba（0,0,0,8）插入；
}
.form包装器输入：：-webkit输入占位符{
颜色：#999；
字体大小：正常；
字体：斜体；
}
.表单包装器输入：-moz占位符{
颜色：#999；
字体大小：正常；
字体：斜体；
}
.表单包装输入：-ms输入占位符{
颜色：#999；
字体大小：正常；
字体：斜体；
}    
.表单包装器按钮{
溢出：可见；
位置：相对位置；
浮动：对；
边界：0；
填充：0；
光标：指针；
高度：40px；
宽度：110px；
字体：粗体15px/40px‘lucida sans’、‘投石机MS’、‘Tahoma’；
颜色：#fff；
文本转换：大写；
背景#d83c3c；
-moz边界半径：0 3px 3px 0；
-webkit边界半径：0 3px 3px 0；
边界半径：0 3px 3px 0；
文本阴影：0-1px0RGBA（0,0,0,3）；
}   
.form包装器按钮：悬停{
背景：#e54040；
}   
.表单包装器按钮：活动，
.form包装器按钮：焦点{
背景：#C42F；
}
.表单包装器按钮：在{
内容：''；
位置：绝对位置；
边框宽度：8px 8px 8px 0；
边框样式：实心无；
边框颜色：透明#d83c3c透明；
顶部：12px；
左-6px；
}
.表单包装器按钮：悬停：在{
右边框颜色：#e54040；
}
.表单包装器按钮：焦点：前{
右边框颜色：#c42f2f；
}    
.form包装器按钮：-moz焦点内部{
边界：0；
填充：0；
}
@仅介质屏幕和（最小宽度：320px）和（最大宽度：480px）{
.表格包装{
宽度：300px；
}
.表单包装器输入{
宽度：160px；
}
}

搜寻

您可以使用“最大宽度”而不是“宽度”，这将使其具有响应性，并保持不需要在“%中设置的宽度
.表格包装{
最大宽度：450像素；
}
.表单包装器输入{
最大宽度：330px；
}

<form class="form-wrapper cf">
    <input type="text" placeholder="Search here..." required>
      <button type="submit">Search</button>
</form>

You can use "max-width"  instead of width  it will make it responsive and also maintain the width you don't need to make it in "%"
    <pre>
    .form-wrapper {
        max-width: 450px;
    }
    .form-wrapper input {
        max-width: 330px;
    }

    </pre>