Adding an input field and icon at the center using ::after

Having trouble centering an input field with an icon after it in a div. I can center the input text easily using text-align:center, but struggling to center the icon added using ::before.

The search text is centered, but not the icon

https://i.sstatic.net/QPYue.png

How can I center both the search text and icon so they are underneath the CENTER title? Is there a way to achieve this without modifying/adding HTML?

Below is the HTML and CSS code I am currently 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 : Unable to modify the form generated by a PHP function, so looking for a pure CSS solution to center position the form input and icon.

Although the search form is centered, the placeholder text named SEARCH and icon are still not centered. How can I center both these elements.

https://i.sstatic.net/K1qd6.png

htmlcss

Answer №1

Include text-align:center in the styling for the form element

.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

After countless days of trial and error with CSS, I finally found a solution that works for what I needed. It may not be the most elegant, but it gets the job done.

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

If I come across a better solution in the future, I will definitely update my answer to share it with others.

The limitations of this current solution are evident:

https://i.sstatic.net/5GhXi.png

https://i.sstatic.net/gujuR.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a lively JQ plot and saving it within an HTML file from a .aspx page using C# .net

I am currently in the process of developing a web-based application using Bootstrap. My goal is to save a .aspx page as an HTML file within my application. Upon writing the code: using System; using System.Collections.Generic; using System.Linq; using S ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to eliminate the left padding on a TimelineItem component?

When using the Timeline component to display information, there are three columns: TimelinItem, TimelineSeparator, and TimelineContent. I tried setting the padding of TimelineItem to 0 but it didn't work. The <Trace/> component is a sub-compone ...

javascripthtmlcssreactjsmaterial-ui

JavaScript salary calculation function not functioning properly

Once the user inputs the employee's name and the number of hours they worked on the HTML form, the submit button captures this information and stores it in variables for calculating their pay. The script also factors in overtime pay. Despite feeling l ...

javascripthtmlfunction

Utilizing Bootstrap for aligning a span element beneath a div container

I'm working on enhancing a project by integrating more Bootstrap elements. In one part, I have a circular div with the text "Go to Homepage" below it. My goal is to center the span under the div and have it appear on a single line. How can I achieve t ...

htmlcsstwitter-bootstrappositionmargin

In PHP forms, ensure that only completed textboxes are submitted and empty textboxes are discarded

I've created a form that displays all available products from a database along with their prices. Users can input the quantity they want to purchase for each product, and upon submission, the total amount will be calculated. There are 5 products in th ...

javascriptphphtml

What steps can I take to ensure a website designed for Firefox will work seamlessly on Safari and Chrome browsers as well?

As someone who is still learning about web development, I find myself struggling with browser compatibility issues. It's frustrating to see my website looking different in Chrome compared to Safari. While I know that browsers interpret code differentl ...

htmlcssfirefoxsafariwebkit

Creating a 2D image of a Three.js scene in JPG format: Is it possible?

I am working with a three.js scene that includes rendering a 3D cube. The code snippet for the scene setup is shown below: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHe ...

javascripthtmlthree.jswebgl

Display a division upon choosing an option

I am working on a project that involves a selection menu in the form of a drop-down list. <select> <option id="one" value="something">Car</option> <option id="two" value="anything">Plane</option> </select> Also, I ...

javascriptjqueryhtmlcss

Is it possible to refresh HTML content using jQuery?

Currently, I am attempting to iterate through response data and integrate the values into the HTML of my webpage. It's crucial for me to clear any existing values in the HTML so that only the new ones are displayed, keeping it up-to-date. The structu ...

javascriptjquerydjangohtml

When a Vue.js datepicker is set as required, it can be submitted even if

When using the vuejs-datepicker, setting the html required attribute on input fields may not work as expected. This can lead to the form being submitted without an input value. <form> <datepicker placeholder="Select Date" required></datep ...

javascripthtmlvue.jsvuejs2vuejs-datepicker

Is there a way to automatically extract data from a CSV file and display it on a website using either PHP or JavaScript?

I have a web service link at www.xyz.com/abcdefg. When I visit this link, it automatically downloads a CSV file. The CSV file contains columns of data organized like this: Column A Column B Column C Column D test1 1 5 ...

javascriptphpjqueryhtmlangularjs

The counter variable does not function properly within a setInterval function

I have encountered an issue with my scroll-counter variable inside the setInterval function. It increments by 1 each time the setInterval function runs, which is supposed to happen 20 times before stopping. However, I noticed that the value of this variabl ...

javascriptjqueryhtml

Obtaining JSON data using Jquery results in the output of "undefined"

I am struggling to extract the correct values from a JSON document in order to display schedules in list view. Currently, when accessing the JSON document, I keep receiving "undefined" as the result. Below is an example of the JSON document: { "Ferries": ...

jqueryhtmljson

The discrepancy in percentages by a single pixel within Webkit

I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, ...

htmlcsswebkit

Explicitly employ undefined constants deliberately

So I am working on a project called WingStyle: https://github.com/IngwiePhoenix/WingStyle. It is still in the development phase, and I'm looking for ways to improve its functionality. One thing I want to address is the use of quotes. For example, whe ...

phpcssoop

Extracting data from a webpage without using Web Locators, Selenium, or Python

xpath_id = '/html/body' conf_code = driver.find_element(By.XPATH, (xpath_id)) code_list = [] for c in range(len(conf_code)): code_list.append(conf_code[c].text) Looking at the situation presented above, I opted for the xpath locato ...

pythonhtmlselenium

How to Adjust Overlapping Text in CSS?

Currently, I am facing an issue with an element overlapping in my CSS file. On a regular browser, one line of text appears fine but on mobile devices, it overlaps into two lines. This problem is specifically for the mobile version of the website, particula ...

htmlcssmobiletwitter-bootstraptablet

The Calibri Light font is not supported by Chrome version 37

Yesterday my website was working fine, but today when I checked it, some strange issues appeared. The Calibri Light font that I used extensively has been replaced with the default font, and the width of input fields has changed. How can I resolve this issu ...

cssgoogle-chromefonts

Creating interactive forms (the optimal method)

My project involves creating an Android Tablet application that will connect to a web service to retrieve dynamic forms which can be filled offline and then submitted when online. These forms are not predefined, and may contain attached images. However, I ...

androidxmljsonweb-serviceshtml

Arrange a div within a list element to create a grid-like structure

My current structure is as follows: <ul class="wrap-accordionblk"> <li class="accordionblk-item"> <div class="accordionblk-header"> <div class="row-fluid"> <div class="infoblk"> <label>SESSION ID ...

htmlcssalignment