Center Input Field and Icon Added Using ::after

Question

I've got a input field with a icon added after the input which needs to be centered within a div. I can easily center the input text using text-align:center but finding it very difficult to center the icon as its added using ::before.

I can center the search text but not the icon

How do i center both the search text and icon so its centered underneath the CENTER title? Is it possible to do this without modifying/adding HTML?

Here's the HTML and CSS i'm working with

.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>

Update : I can't edit the form as its generated by a PHP function so i need to use pure CSS to center position the form input and icon.

Here's the search form centered however the placeholder text named SEARCH and icon are not centered. How do i center both these elements.

Try this https://stackoverflow.com/questions/8843571/html-input-with-background-image — vadivel a, Feb 21 '20 at 04:46

waqas Mumtaz · Answer 1 · 2020-02-21T05:13:46.947

Add text-align:center to 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>

You don't need to edit html. add `.search-form { text-align: center; }` in css file. — waqas Mumtaz, Feb 21 '20 at 04:49
The search form is already centered. Its the input which includes the placeholder text named SEARCH and magnifying glass icon icon which need to be centered. See updated image. — Dev, Feb 21 '20 at 04:55
ah ok got it. Your text input is centered in div, You need to centered text and icon right ?? I think to make icon center is not a good option. Icon in text field should be left align or right align. it can't be centered (in the middle of the input) — waqas Mumtaz, Feb 21 '20 at 05:10
You can align your input text to left and decrease the with of input. Is there any live link to your code ??? — waqas Mumtaz, Feb 21 '20 at 05:11
Yes, i need to center the placeholder text and icon within the search form input. — Dev, Feb 21 '20 at 05:34

score 0 · Accepted Answer · answered Feb 21 '20 at 05:44

This is how i did it. Not the best solution i know but it works after spending days playing around with CSS.

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

I think there is a better solution and will update my answer if i ever work it out.

This is why its not a great solution

Center Input Field and Icon Added Using ::after

2 Answers2