Setting the width of the input to a specific pixel value won't work for me, I need the input to fill the space. From what I see in other examples the way the search icon is typically set is as the background image for the container div either as an image file or an SVG string with the input being set to 100%. Not sure why setting display to block for the input doesn't fill the space but anyway. I think using the font icon for the content property is part of the problem. I ended up home brewing my own CSS based on other examples to create the search form.
<
form
class
=
"search-form"
>
<
div
>
<
input
placeholder
=
"Search..."
type
=
"search"
>
</
div
>
</
form
>
CSS
form.search-form {
padding
:
7px
;
}
.search-form > div {
padding
:
5px
;
background-image
:
url
('data:image/svg+xml;charset=US-ASCII,%
3
C%
3
Fxml%
20
version%
3
D%
221.0%
22%
20
e
ncoding%
3
D%
22
iso
-8859
-1%
22%
3
F%
3
E%
3
C!DOCTYPE%
20
svg%
20
PUBLIC%
20%
22
-%
2
F%
2
FW
3
C%
2
F%
2
FDTD%
20
SVG%
201.1%
2
F%
2
FEN%
22%
20%
22
http%
3
A%
2
F%
2
Fwww.w
3
.org%
2
FGraphics%
2
FSVG
%
2
F
1.1%
2
FDTD%
2
Fsvg
11
.dtd%
22%
3
E%
3
Csvg%
20
version%
3
D%
221.1%
22%
20
id%
3
D%
22
Layer_
1
%
22%
20
xmlns%
3
D%
22
http%
3
A%
2
F%
2
Fwww.w
3
.org%
2
F
2000%
2
Fsvg%
22%
20
xmlns%
3
Axlink%
3
D%
22
http%
3
A%
2
F%
2
Fwww.w
3
.org%
2
F
1999%
2
Fxlink%
22%
20
x%
3
D%
220px
%
22%
20
y%
3
D%
220px
%
22%
20%
20
width%
3
D%
2214px
%
22%
20
height%
3
D%
2214px
%
22%
20
viewBox%
3
D%
220%
200%
2014%
2014
%
22%
20
style%
3
D%
22
enable-background%
3
Anew%
200%
200%
2014%
2014%
3
B%
22%
20
xml%
3
Aspa
ce%
3
D%
22
preserve%
22%
3
E%
3
Cpath%
20
d%
3
D%
22
M
10.171%
2
C
8.766
c
0.617
-0.888%
2
C
0.979
-1
.
964%
2
C
0.979
-3.126
c
0
-3.037
-2.463
-5.5
-5.5
-5.5
s
-5.5%
2
C
2.463
-5.5%
2
C
5.5
s
2.463%
2
C
5.5%
2
C
5.5%
2
C
5.5%
20
c
1.152%
2
C
0%
2
C
2.223
-0.355%
2
C
3.104
-0.962
l
3.684%
2
C
3.683
l
1.414
-1.414
L
10.171%
2
C
8.766
z%
20
M
5.649%
2
C
9.14
c
-1.933%
2
C
0
-3.5
-1.567
-3.5
-3.5%
20
c
0
-1.9
33%
2
C
1.567
-3.5%
2
C
3.5
-3.5
c
1.933%
2
C
0%
2
C
3.5%
2
C
1.567%
2
C
3.5%
2
C
3.5
C
9.149%
2
C
7.572%
2
C
7.582%
2
C
9.14%
2
C
5.649%
2
C
9.14
z%
22%
2
F%
3
E%
3
C%
2
Fsvg%
3
E');
background-repeat
:
no-repeat
;
background-position
:
10px
center
;
border
:
1px
solid
#ccc
;
}
.search-form input[type=search] {
width
:
100%
;
padding
:
0
0
0
30px
;
background-color
:
transparent
;
border
:
0
none
;
}