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

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)?

Answer 1

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>