单击提交按钮时如何保持文本字段样式？

Question

我的搜索栏中有一个表单中的提交按钮。我这样做是为了当鼠标悬停在表格上时，按钮将会出现，当文本字段处于焦点时，该栏将保持显示状态，并且该字段将变暗。现在，当我单击提交按钮时，文本字段失去焦点。

单击提交按钮时，有没有办法保持文本字段的样式？在中，当文本字段被聚焦并且您单击提交按钮时，它会保持聚焦（或者样式不会改变），如果文本字段没有聚焦并且您单击提交按钮，则它不会＃39 ;焦点（或风格没有变化）。我正在寻找一个非JavaScript的解决方案。

这是HTML：

<form role="search" method="get" id="searchform" class="searchform d-1of3 t-3of8 m-all" action="' . home_url( '/' ) . '" >
      <input type="search" class="search-field m-text-center" placeholder="'.__( 'Search for...', 'bones' ).'" value="' . get_search_query() . '" name="s" title="Search" />
      <input type="submit" class="search-icon fa" value="&#xf002;" />
</form>

这里是CSS：

form#searchform
{
    position: relative;

    padding-right: 43px;
}
form#searchform input[type='search'].search-field
{
    padding-right: 36px;

    text-indent: 36px;
}
form#searchform input[type='submit']
{
    font: normal normal normal 2em/1 FontAwesome;

    position: absolute;
    top: 0;
    right: 0;

    width: 36px;
    padding: 3px;

    -webkit-transition: opacity 250ms ease-in-out;
       -moz-transition: opacity 250ms ease-in-out;
         -o-transition: opacity 250ms ease-in-out;
            transition: opacity 250ms ease-in-out;

    color: #95070a;
    background-color: transparent;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
form#searchform input[type='submit'].search-icon.fa:active
{
    zoom: 1;

    opacity: 1;

    filter: alpha(opacity=100);
}
form#searchform input[type='search'].search-field:focus + input.search-icon,
form#searchform input[type='submit'].search-icon:hover
{
    zoom: 1;

    opacity: .75;

    filter: alpha(opacity=75);
}
form#searchform:hover input.search-icon,
.search-icon
{
    zoom: 1;

    opacity: .5;

    filter: alpha(opacity=50);
}
.no-touch .search-icon
{
    opacity: 0;

    filter: alpha(opacity=0);
}

提前致谢！