Центральное поле ввода и значок добавлены с помощью :: after

Question

У меня есть поле ввода с иконкой, добавленной после ввода, которое должно быть центрировано внутри элемента div. Я могу легко центрировать вводимый текст, используя text-align: center, но мне очень трудно центрировать значок, так как он добавлен с использованием :: before.

Я могу центрировать текст поиска, но не значок

Как мне расположить текст и значок поиска так, чтобы он центрировался под заголовком CENTER? Можно ли сделать это без изменения / добавления HTML?

Вот HTML и CSS Я работаю с

.search-form {
        overflow: hidden;
        position: relative;
    }
    
    .header-right {
    	float: right;
    	position: relative;
    	text-align: right;
    	width: 25%;
    	z-index: 99;
    }
    
    .header-left .search-form::before {
    	color: #fff;
    	content: "\f375";
    	display: block;
    	font-family: "Ionicons"; /* stylelint-disable-line */
    	padding-left: 1px;
    	position: absolute;
    	top: 12px;
    }
    
    .header-left .search-form input[type="submit"] {
    	border: 0;
    	clip: rect(0, 0, 0, 0);
    	height: 1px;
    	margin: -1px;
    	padding: 0;
    	position: absolute;
    	width: 1px;
    }
    
    .header-left input[type="search"] {
    	border-width: 0;
    	background-color: transparent;
    	color: #fff;
    	font-size: 14px;
    	font-weight: 700;
    	letter-spacing: 2px;
    	text-align: left;
    	text-transform: uppercase;
    }
    
    .header-left ::placeholder {
    	color: #fff;
    	opacity: 1;
    }
    
    .header-left input[type="search"] {
    	text-align: right;
    }

<div class="header-left"><form class="search-form" method="get" action="http://dev.local/" role="search" itemprop="potentialAction" itemscope="" itemtype="https://schema.org/SearchAction"><label class="search-form-label screen-reader-text" for="searchform-1">Search</label><input class="search-form-input" type="search" name="s" id="searchform-1" placeholder="Search" itemprop="query-input"><input class="search-form-submit" type="submit" value="Search"><meta content="http://dev.local/?s={s}" itemprop="target"></form></div>

Обновление: Я не могу редактировать форму, созданную функцией PHP, поэтому мне нужно использовать чистую CSS для центрирования позиции ввода и значка формы.

Вот форма поиска по центру, однако текст заполнителя с именем SEARCH и значок не центрированы. Как мне отцентрировать оба этих элемента.

Answer 1

Добавить text-align:center к form

.search-form {
        overflow: hidden;
        position: relative;
        text-align: center;
    }
    
    .header-right {
    	float: right;
    	position: relative;
    	text-align: right;
    	width: 25%;
    	z-index: 99;
    }
    
    .header-left .search-form::before {
    	color: #fff;
    	content: "\f375";
    	display: block;
    	font-family: "Ionicons"; /* stylelint-disable-line */
    	padding-left: 1px;
    	position: absolute;
    	top: 12px;
    }
    
    .header-left .search-form input[type="submit"] {
    	border: 0;
    	clip: rect(0, 0, 0, 0);
    	height: 1px;
    	margin: -1px;
    	padding: 0;
    	position: absolute;
    	width: 1px;
    }
    
    .header-left input[type="search"] {
    	border-width: 0;
    	background-color: transparent;
    	color: #000;
      width: 20%;
    	font-size: 14px;
    	font-weight: 700;
    	letter-spacing: 2px;
    	text-align: center;
    	text-transform: uppercase;
    }
    
    .header-left ::placeholder {
    	color: #fff;
    	opacity: 1;
    }
    

<div class="header-left">
<form class="search-form" method="get" action="http://dev.local/" role="search" itemprop="potentialAction" itemscope="" itemtype="https://schema.org/SearchAction">
<label class="search-form-label screen-reader-text" for="searchform-1">Search</label>
<input class="search-form-input" type="search" name="s" id="searchform-1" placeholder="Search" itemprop="query-input">
<input class="search-form-submit" type="submit" value="Search">
<meta content="http://dev.local/?s={s}" itemprop="target">
</form></div>

Answer 2

Вот как я это сделал. Не лучшее решение, которое я знаю, но оно работает после нескольких дней игры с CSS.

.header-left .search-form {
        width: 62%;
    }

Я думаю, что есть лучшее решение, и я обновлю свой ответ, если я когда-нибудь его решу.

Вот почему это не лучшее решение