2

I have a search input field, which has a backround set up like this:

background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;

But, I would like to replace the image for an icon. I am using and have tried to do it like this:

input[type=search]:before {
  font-family: 'Ionicons';
  content: '\f2f5';
  color: red;
}

This is the fiddle. But, icon is not visible, what should I do?

Leff
  • 1,968
  • 24
  • 97
  • 201

2 Answers2

2

:before and :after can be used on "container" elements only. An input is not a container, because it cannot "contain" other elements.

Wrap the input in a span, and apply the :before styles to it:

<span class="container"><input type="search" placeholder="Search"></span>

.container:before {
  font-family: 'Ionicons';
  content: '\f2f5';
  color: red;
  position: absolute;
}

Updated Fiddle

Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
1

You can't use :before or :after on <input> on every browser!

But you can use a solution using a container for the <input>:

div span {
  margin-left:-20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css" rel="stylesheet"/>
<div>
  <input type="text"/>
  <span class="ion-search"></span>
</div>

You can also use a <label> surrounding the <input> for more accessability:

label[for="search"]:after {
  font-family: 'Ionicons';
  content: '\f2f5';
  color: red;
  margin-left:-20px;
}
label[for="search1"] span {
  margin-left:-20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css" rel="stylesheet"/>
<label for="search">
  <input id="search" name="search" type="text"/>
</label>

<!-- or -->

<label for="search1">
  <input id="search1" name="search1" type="text"/>
  <span class="ion-search"></span>
</label>
Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
  • It's worth saying that psudeo elements might work on input elements on some browsers but it is wrong to use it. – Ahmad Alfy Sep 03 '17 at 11:17