当跨度为焦点时，更改输入字段宽度（CSS）

Question

我有一个输入栏，当焦点对准时会改变宽度。但是，我希望它在其范围内的任何内容都在焦点时更改宽度。我该怎么做？首选仅CSS解决方案。

CSS：

/*When the field is not in focus*/
input[type=text] {
    width: 250px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

/*I want to say, when the span "searchsite" is in focus, make the width of the search box 25%*/
input[type=text]:focus {
    width: 25%;
}

HTML：

<span id="searchsite" class="SearchBox">
    <input name="SearchString" class="form-control" type="text" placeholder="Enter Search Term" Search />
        <span class="searchmore">
            <label>Sort By: </label>
            <!--drop down list-->
            <button type="submit"><span>Search</span></button>
        </span>
</span>