Kevin Powell - Community•5mo ago

Input with icon inside

I'm struggling about styling an input for a challenge, that contains an icon inside. Currently I'm trying with the ::after pseudo-class, tried with content and background-image but the icon still doesn't show. Obs.: I'm using Material Symbols to get the icons now, but before I was trying a url to a .png from a icon (when using content: url(...))

// shorted html
<link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,100,0,0" />
<input class="input" />

// shorted css
.input {
    position: relative;
}

.input::after {
    content: 'e941';
    position: absolute;
    right: 10px;
    display: block;
    width: 20px;
    height: 20px;
}

// shorted html
<link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,100,0,0" />
<input class="input" />

// shorted css
.input {
    position: relative;
}

.input::after {
    content: 'e941';
    position: absolute;
    right: 10px;
    display: block;
    width: 20px;
    height: 20px;
}

8 Replies

clevermissfox•5mo ago

I dont have an exact replica but you just want to create a row w the input and the icon, remove the border/focus on the input and add it back to the parent wrapping element. The .input-wrap on this project has the same concept https://codepen.io/Miss-Fox/pen/bGPbVrJ

CleverMissFox-GAcct

CodePen

Retro Chatbot

...

clevermissfox•5mo ago

The css isn't organized for teaching so I'd just select that element in dev tools rather than swimming through the css drawer 😵‍💫

snxxwyy•5mo ago

i have something extremely similar that may be of help https://codepen.io/deerCabin/pen/RwzbzqB

Choo♚𝕂𝕚𝕟𝕘•5mo ago

The basic idea is don't try to put them in one element. Do it as an illusion. The input and the icon are just next to each other but made to look like one element by styling their common parent.

ἔρως•5mo ago

and dont forget to style the parent based on what happens to the children for example, if it is valid, invalid, focused, hovering...

DreidelOP•5mo ago

Yes... Just like you all said, just wrap the input with another element and make it as if it were a "single" element I was trying to reduce efforts by doing it directly in the input::after, but I'll remember that doesn't work properly Really appreciate your help, thanks for all answers!

ἔρως•5mo ago

input::after doesnt work for text-like inputs it works for checkbox, radio and a few more that im not sure about

MarkBoots•5mo ago

if you make it a form or a fieldset, you can easily check with css if everything inside is valid. also consider the icon to be a button

Gaming

Programming

Input with icon inside