Add "x" clear/dismiss button inside a input of type text with css and not a gif

Question

I have a input of type text in html5 with has the "Email" as placeholder. I would like to add "x" to dismiss the input upon click on that and I tried different solution but none would look like the same (I dont want to change the type of the input to search), here is what I have for the input:

.email-input {
  display: inline-block;
  height: 40px;
  width: 400px;
  font-size: 15px;
  color: #666666;
  text-indent: 8px;
  border: 0px;
  margin: 26px 0px 16px 0px;
}

<input id="try-different-email" type="text" name="email" placeholder="Email" class="email-input" />

This is how I would like the "x" dismiss button looks like, Can anybody help me with it please (especially the css part)?

http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text — bhansa, Apr 03 '17 at 18:21
btw, I do not like this location personally, because it interferes with the plugins that fill in forms for you (lastpass/dashlane/etc) — nycynik, Apr 03 '17 at 18:21
Please read [ask]. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". — Heretic Monkey, Apr 03 '17 at 18:21
The solution you mentioned is using gif and transition to have the "x" in the input box, where as I want it with css. The different positioning I tried relative to the input box didnt work and the "x" didn't look to what I have in pic in terms of css. Any help will be much appreciated — AlreadyLost, Apr 03 '17 at 18:27
You'll need to [edit] your question to include your exact requirements. As it is now, the questions are identical. Please specify where the "x" is supposed to come from. — Heretic Monkey, Apr 03 '17 at 18:35

score 3 · Accepted Answer · answered Apr 03 '17 at 18:52

3

You could do something like this, put the text field in a div along with an x (× entity) with a class and then write your jQuery to run that close x to remove the field:

.email-input {
  display: inline-block;
  height: 40px;
  width: 100%;
  font-size: 15px;
  color: #666666;
  text-indent: 8px;
  border: 1px solid #2d2d2d;
}

.text-field-position {
position: relative;
}

.text-field-position span {
position: absolute;
right: 1em;
top: 0;
bottom: 0;
line-height: 40px;
}

<div class="text-field-position">
<input id="try-different-email" type="text" name="email" placeholder="Email" class="email-input"><span class="removeClick">&times;</span></div>

answered Apr 03 '17 at 18:52

Nathaniel Flick

2,902
2
22
31

Hi Nathaniel, thank you for your answer. I have one question though, I dont know why when I use the same code as you wrote the "x" will be outside the box on the rightmost of page. but when I change the position from absolute to relative in .text-field-position span, the "x" will be back inside the input box. – AlreadyLost Apr 03 '17 at 19:31
Absolute positioning looks for the next relative parent so if there are none it defaults to the browser window (body). In the case of the code I provided, I set the containing div, not the text field, as the relative element, then both the text field and X are related to the containing div. – Nathaniel Flick Apr 04 '17 at 08:26

Add "x" clear/dismiss button inside a input of type text with css and not a gif

1 Answers1