Iphone输入填充背景颜色

我的网站在iPhone / Safari浏览器上渲染得很好，但有一个例外：我的文本输入字段具有透明的背景颜色和颜色 . 我试着设置颜色！重要但没什么可做的...如何在输入上设置背景颜色？这是我的代码：我试着设置背景..当点击搜索图标时它打开一个输入字段...这是打开菜单的脚本

$.(document).ready(function(){
        var submitIcon = $('.searchbox-icon');
        var inputBox = $('.searchbox-input');
        var searchBox = $('.searchbox');
        var isOpen = false;
        submitIcon.click(function(){
            if(isOpen == false){
                searchBox.addClass('searchbox-open');
                searchBox.css( "background-color", "red!important" );
                inputBox.focus();
                inputBox.attr("placeholder", "<?= Yii::t('app', 'app.searchhead')?>");
                isOpen = true;
            } else {
                searchBox.removeClass('searchbox-open');
                inputBox.focusout();
                inputBox.attr("placeholder", "");
                inputBox.attr("value", "");
                inputBox.val('');
                isOpen = false;
            }
        });
        submitIcon.mouseup(function(){
            return false;
        });
        searchBox.mouseup(function(){
            return false;
        });
        $(document).mouseup(function(){
            if(isOpen == true){
                $('.searchbox-icon').css('display','block');
                submitIcon.click();
            }
        });
    });

这是HTML代码：

<form class="searchbox" id="searchForm" method="get" action="<?= '/store/' . $lang->url . '/' . Page::findOne(96)->url ?>">
     <input type="search" id="search" dir="ltr"  title="<?= Yii::$app->OutData->showTxt(Label::findOne(190)->label); ?>" placeholder="" <?= (isset($_GET['search']) and ! empty($_GET['search'])) ? 'value="' . $_GET['search'] . '"' : '' ?> name="search" class="searchbox-input" required>
     <input type="submit" class="searchbox-submit" value="">
     <span class="searchbox-icon"></span>
 </form>

和我的css：

.searchbox-open{
    width:100%;
    background-color: #20242d;
    float:left;
    color: white;
}
.searchbox-input{
    top:0;
    right:0;
    border:0;
    outline:0;
    background: transparent !important;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    width: 150px;
    /*height:50px;*/
    margin:0;
    padding:0px 55px 0px 20px;
    font-size:20px;
    color:#fff !important;
    border-color: transparent !important;
    padding:10px !important;
}
.searchbox{
    min-width: 135px;
    position:absolute;
    min-width:230px;
    width:0%;
    height:50px;
    overflow:hidden;
    right: 0px;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
    top: 8px;
}