Bonjour,

Je voudrais intégrer un input dans ma page pour un search bar.
Cependant, je me retrouve avec un problème de mise en forme de cet input.
La mise en forme est différente selon les navigateur et surtout sur ipad par exemple.

J'ai la hauteur, la longueur et la position de mon input qui varie beaucoup entre chaque navigateur (entre google chrome, IE, opera, safari ....).
Je n'arrive pas à figer la mise en forme via css de cet input search box.

Voici mes codes :

dans ma page html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
<div id="search-container">
<input class="search" type="text" name="search" id="search"  placeholder="Search..." autocomplete="off" style="width:115px;height:22px;"/> 
<div href="#" id="showAll">X</div>
<div id="noMatches" style="display:none;">No matches found</div>
</div>

dans mon code css :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
#search-container {
	position: relative;
	display:inline-block;
	height: 60px;
	width: 170px;
	top: 0;
	bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 30px;
	padding-bottom: 0px;
	float: left;
	border-top: dotted 1px #ACACAC;
	-webkit-appearance: none;
	/**border-bottom: dotted 1px #ACACAC;**/
}
 
input[type=text] {
	width: 115px;
	height: 22px;
	margin-left: 20px;
	font-family: 'confortaa-light';
	font-size: 14px;
	font-weight: normal;
	color: #000;
	-webkit-appearance: none;
	border-radius: 0;
	border: none;
	-webkit-text-size-adjust: none !important;
}
input[type=text]:focus, textarea:focus {
	font-family: 'confortaa-light';
	font-size: 14px;
	font-weight: normal;
	color: #000;
	width: 115px;
	outline: solid 1px rgb(97,205,245);
	-webkit-appearance: none;
	border-radius: 0;
	border: none;
	-webkit-text-size-adjust: none !important;
}
#showAll {
	position: relative;
	float: left;
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	top: -24px;
	margin-left: 138px;
	font-family: 'confortaa-light';
	font-size: 14px;
	font-weight: bold;
	line-height: 26px;
	color: #FFF;
	background: rgb(97,205,245);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	clear: both;
	-webkit-text-size-adjust: none !important;
}
#noMatches {
	position: relative;
	display:inline-block;
	width: 140px;
	height: 20px;
	top: -15px;
	margin-left: 0px;
	font-family: 'confortaa-light';
	font-size: 14px;
	font-weight: normal;
	color: red;
}
En espérant que quelqu'un puisse résoudre mon problème. J'ai bien passé 3-4h à le résoudre en vain!

Merci