Make icon appear after input

Question

i have this search bar in my application which i want to modify:

Right now the "X"-Icon is visible from the beginning even tho it does nothing before an input was done, so i want to make it appear AFTER the user starts entering text.

The icon is a SVG i added and styled seperatly.

I don't realy know how i can do this, i thought its easy and i can just use something like "::after" but it seems that this it not possible with input fields.

Ps.: im an absolute beginner in CSS so please have mercy.

@ino im not realy sure how to answer this question, its a application, im just in charge to modfiy the styling and usability. The developers used react for most stuff and also some Material UI compenents (which i am trying to "kill" right now). — Pectoralis Major
– Pectoralis Major, Commented Dec 14, 2017 at 13:50
Set display:none; in JS when text is entered set the CSS property for display to something else like block. — Adrian
– Adrian, Commented Dec 14, 2017 at 13:54

Saravanan I · Accepted Answer · 2017-12-14 14:05:09Z

Best way to achieve your requirement would be to have different classes which shows/hides the icon by checking when input is not empty in JS.

If you want to achieve without using JS you can target the adjacent button element when the input is focussed and add ::before pseudo element and style it.

input:focus+button:before { content: "X"; position: absolute; left: 0; color: red; }

cooler · Accepted Answer · 2017-12-14 14:06:03Z

It's not possible with CSS. You would have to use Javascript.

Javascript

// set the id of the x button to x-button // set the id of the input field to input var x_button = document.getElementById("x-button"); var input = document.getElementById("search-input"); input.oninput = function(){ if(this.value) x_button.classList.add("visible"); else x_button.classList.remove("visible"); }

CSS

.x-button { display:none;} .visible {display:block;}

krezus · Accepted Answer · 2017-12-14 14:17:17Z

it is possible if you wanna do it using only css.

#Search{ font-size:22px; color:green; background-image:url('images/search.jpg'); background-repeat:no-repeat; background-position:center;outline:0; } #Search::-webkit-search-cancel-button{ position:relative; right:20px; }

<input id="Search" name="Search" type="search" placeholder="Search" />

Collectives™ on Stack Overflow

Make icon appear after input

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related