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

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

单击“提交”按钮时，是否有办法保持文本字段的样式？如中所示，当文本字段处于焦点且您单击“提交”按钮时，它将保持焦点（或样式不变），而如果文本字段未处于焦点且您单击“提交”按钮时，它将不处于焦点（或样式不变）。我正在寻找一个非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的解决方案吗？@wishall是的，请！

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