10 replies

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;
}

// 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;
}

Input with icon inside

Similar Threads

Similar Threads

Similar Threads