Different result for different browser with CSS - html

Question

I have different results for different browsers in the following code:
.flexsearch--wrapper {
height: auto;
width: 50%;
max-width: 700px;
min-width: 100px;
top: 20px;
overflow: hidden;
background: transparent;
margin: 1px;
position: absolute;
}
.flexsearch--form {
overflow: hidden;
position: relative;
}
.flexsearch--form {
padding: 0 66px 0 0;
/* Right padding for submit button width */
overflow: hidden;
}
.flexsearch--input {
width: 100%;
}
.flexsearch {
padding: 0 25px 0 200px;
/* Padding for other horizontal elements */
}
.flexsearch--input {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 30px;
padding: 0 46px 0 10px;
border-color: #888;
border-radius: 3px;
/* (height/2) + border-width */
border-style: solid;
border-width: 2px;
/*margin-top: 10px;*/
color: #333;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--submit {
position: absolute;
right: 0;
top: 0;
display: block;
width: 32px;
height: 32px;
padding: 0;
border: none;
margin-top: 4px;
/* margin-top + border-width */
margin-right: 5px;
/* border-width */
background: transparent;
color: #888;
font-family: 'Helvetica', sans-serif;
font-size: 30px;
line-height: 30px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--input:focus {
outline: none;
border-color: #333;
}
.flexsearch--input:focus.flexsearch--submit {
color: #333;
}
.flexsearch--submit:hover {
color: #333;
cursor: pointer;
}
/* UPLOAD ICON IMAGE */
#uploadIcon {
/*width: 10%;
height: 100%;*/
padding-top: 10px;
min-width: 80px;
max-width: 80px;
position: absolute;
margin: 0 1% 0 77%;
/* left : 77%;*/
top: -3px;
}
/* SIGN UP / SIGN IN*/
.Signin {
position: fixed;
/*left: 85%;*/
margin-left: 86%;
top: 24px;
/*border : 1.5px solid grey;*/
padding: 3px;
margin-right: 2px;
float: right;
}
/*#Signup {
position: absolute;
left: 93%;
top: 20px;
border : 1.5px solid grey;
padding: 3px;
margin-right: 3px;
}
*/
<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="#" method="post">
<div class="flexsearch--input-wrapper">
<input class="flexsearch--input" type="search" placeholder="search">
</div>
<input class="flexsearch--submit" type="submit" value="➜" />
</form>
</div>
</div>
<img src="upload_icon.png" id = "uploadIcon">
Sign In/Sign Up
<!-- Sign Up -->
The problem is that arrow and the Sign In and Sign Up with Firefox works perfectly :
But with Chrome or Safari it doesn't:
Is the problem from my code? or do I need to add some customized code for each browser. And if yes, how can that be done? Can it be done with -webkit or -moz Because I tried this, but it didn't work. Probably, I haven't written it well.